---
title: "添加列表节点 UI 组件"
description: "在您的 Tiptap 编辑器中添加列表节点 UI 组件。详细信息请查阅我们的文档。"
canonical_url: "https://tiptap.zhcndoc.com/ui-components/node-components/list-node"
---

# 添加列表节点 UI 组件

在您的 Tiptap 编辑器中添加列表节点 UI 组件。详细信息请查阅我们的文档。

在 Tiptap 编辑器中，针对不同类型的列表（包括有序列表、无序列表和任务列表）进行样式设计。

> **Interactive demo:** [list node](https://template.tiptap.dev/preview/tiptap-node/list-node)

## 安装

你可以通过 Tiptap CLI 添加节点组件（适用于 Vite 或 Next.js）

```bash
npx @tiptap/cli@latest add list-node
```

### 手动集成

对于非 Vite 或 Next.js 的框架，可以从[开源仓库](https://github.com/ueberdosis/tiptap-ui-components/tree/main/apps/web/src/components/tiptap-node/list-node)手动添加节点组件。

### 导入样式

此组件需要你导入我们添加到 `styles/keyframe-animation.scss` 和 `styles/_variables.scss` 的样式文件。

## 用法

ListNode 提供了编辑器中各种列表类型的样式支持。要使用它，请将其包含在你的项目中，并确保使用 Tiptap 的列表扩展。

```tsx
import { useEditor, EditorContent } from '@tiptap/react'
import { TaskList } from '@tiptap/extension-task-list'
import { TaskItem } from '@tiptap/extension-task-item'
import { StarterKit } from '@tiptap/starter-kit'

import '@/components/tiptap-node/list-node/list-node.scss'

export default function EditorWithLists() {
  const editor = useEditor({
    extensions: [
      StarterKit,
      TaskList,
      TaskItem.configure({
        nested: true,
      }),
    ],
    content: `
      <ul>
        <li>无序列表项</li>
        <li>另一个无序项</li>
      </ul>

      <ol>
        <li>有序列表项</li>
        <li>另一个有序项</li>
      </ol>

      <ul data-type="taskList">
        <li data-type="taskItem" data-checked="true">已完成任务</li>
        <li data-type="taskItem" data-checked="false">待完成任务</li>
      </ul>
    `,
  })

  return <EditorContent editor={editor} />
}
```

## 功能特性

- 保持有序列表、无序列表和任务列表的样式一致性
- 支持正确的嵌套和合适的缩进
- 自定义的任务列表复选框样式
- 交互式复选框，支持点击操作
- 已完成任务显示删除线
- 支持暗色模式

## 依赖需求

开源功能(这些扩展为必需)：

- [`@tiptap/extension-bullet-list`](https://tiptap.zhcndoc.com/editor/extensions/nodes/bullet-list.md)
- [`@tiptap/extension-ordered-list`](https://tiptap.zhcndoc.com/editor/extensions/nodes/ordered-list.md)
- [`@tiptap/extension-list-item`](https://tiptap.zhcndoc.com/editor/extensions/nodes/list-item.md)
- [`@tiptap/extension-task-list`](https://tiptap.zhcndoc.com/editor/extensions/nodes/task-list.md)
- [`@tiptap/extension-task-item`](https://tiptap.zhcndoc.com/editor/extensions/nodes/task-item.md)