---
title: "列表项扩展"
description: "在 Tiptap 中使用列表项扩展，以添加对用于无序和有序列表的 `` 标签的支持。了解更多信息，请查看我们的文档！"
canonical_url: "https://tiptap.zhcndoc.com/editor/extensions/nodes/list-item"
---

# 列表项扩展

在 Tiptap 中使用列表项扩展，以添加对用于无序和有序列表的 `` 标签的支持。了解更多信息，请查看我们的文档！

列表项扩展添加对 `<li>` HTML 标签的支持。它用于无序列表和有序列表，实际上离不开这些列表。

> **Interactive demo:** [ListItem](https://embed.tiptap.dev/preview/Nodes/ListItem)

> **修改退格行为:**
>
> 如果您想修改列表的退格和删除功能的标准行为，请阅读 [ListKeymap](https://tiptap.zhcndoc.com/editor/extensions/functionality/listkeymap.md) 扩展。

## 安装

```bash
npm install @tiptap/extension-list
```

此扩展需要 [`BulletList`](https://tiptap.zhcndoc.com/editor/extensions/nodes/bullet-list.md) 或 [`OrderedList`](https://tiptap.zhcndoc.com/editor/extensions/nodes/ordered-list.md) 节点。

## 使用

```js
import { Editor } from '@tiptap/core'
import { ListItem } from '@tiptap/extension-list'

new Editor({
  extensions: [ListItem],
})
```

此扩展在默认情况下与 `ListKit` 扩展一起安装，因此您无需单独安装它。

```ts
import { Editor } from '@tiptap/core'
import { ListKit } from '@tiptap/extension-list'

new Editor({
  extensions: [ListKit],
})
```

## 设置

### HTMLAttributes

应添加到渲染的 HTML 标签中的自定义 HTML 属性。

```js
ListItem.configure({
  HTMLAttributes: {
    class: 'my-custom-class',
  },
})
```

## 快捷键

| 命令              | Windows/Linux | macOS       |
| --------------- | ------------- | ----------- |
| splitListItem() | Enter         | Enter       |
| sinkListItem()  | Tab           | Tab         |
| liftListItem()  | Shift + Tab   | Shift + Tab |

## 源代码

[packages/extension-list/src/item/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-list/src/item/)

## 最小安装

```js
import { Editor } from '@tiptap/core'
import { ListItem } from '@tiptap/extension-list/item'

new Editor({
  extensions: [ListItem],
})
```