折叠开关

PreviousNext
折叠元素折叠按钮
Loading...

功能特性

  • 在文档中添加可折叠内容
  • 折叠项默认收起，点击可展开显示内部内容

套件使用

安装

最快捷的方式是使用 ToggleKit，它包含预配置的 TogglePlugin（支持缩进）及其 Plate UI 组件。

添加套件

将套件加入插件列表：

import { createPlateEditor } from 'platejs/react';
import { ToggleKit } from '@/components/editor/plugins/toggle-kit';
 
const editor = createPlateEditor({
  plugins: [
    // ...其他插件,
    ...ToggleKit,
  ],
});

手动配置

安装依赖

pnpm add @platejs/indent @platejs/toggle

添加插件

在创建编辑器时，将 TogglePlugin 和 IndentPlugin 加入插件数组。

import { IndentPlugin } from '@platejs/indent/react';
import { TogglePlugin } from '@platejs/toggle/react';
import { createPlateEditor } from 'platejs/react';
 
const editor = createPlateEditor({
  plugins: [
    // ...其他插件,
    IndentPlugin,
    TogglePlugin,
  ],
});

配置插件

为 IndentPlugin 和 TogglePlugin 配置目标元素和组件分配。

import { IndentPlugin } from '@platejs/indent/react';
import { TogglePlugin } from '@platejs/toggle/react';
import { createPlateEditor } from 'platejs/react';
import { ToggleElement } from '@/components/ui/toggle-node';
import { KEYS } from 'platejs';
 
const editor = createPlateEditor({
  plugins: [
    // ...其他插件,
    IndentPlugin.configure({
      inject: {
        targetPlugins: [...KEYS.heading, KEYS.p, KEYS.toggle],
      },
    }),
    TogglePlugin.withComponent(ToggleElement),
  ],
});
  • withComponent: 指定 ToggleElement 渲染折叠元素
  • IndentPlugin.inject.targetPlugins: 配置支持缩进的元素类型（包括折叠项）

添加工具栏按钮

可在工具栏中添加 ToggleToolbarButton 来插入折叠元素。

转换工具栏按钮

将此选项加入转换工具栏按钮可将区块转为折叠项：

{
  icon: <ChevronRightIcon />,
  label: '折叠列表',
  value: KEYS.toggle,
}

插入工具栏按钮

将此选项加入插入工具栏按钮可插入折叠元素：

{
  icon: <ChevronRightIcon />,
  label: '折叠列表',
  value: KEYS.toggle,
}

插件

TogglePlugin

管理折叠功能的插件。

Optionsobject

  • openIds optional Set<string>

    当前展开的折叠项ID集合

    • 默认值: new Set()

  • isOpen optional (toggleId: string) => boolean

    检查折叠项是否展开的函数

    • 默认值: (id) => openIds.has(id)

  • someClosed optional (toggleIds: string[]) => boolean

    检查是否存在收起状态的折叠项

    • 默认值: (ids) => ids.some(id => !isOpen(id))

API接口

api.toggle.toggleIds

切换指定折叠项的展开状态。

切换折叠项展开状态

Parameters

Collapse all

  • ids string[]

    需要切换的元素ID数组

  • force optional boolean | null

    强制切换状态：

    • true: 展开所有
    • false: 收起所有
    • null: 切换当前状态

openNextToggles

将当前选区所在区块标记为展开的折叠项。

钩子函数

useToggleToolbarButtonState

获取折叠工具栏按钮状态的钩子。

Returnsobject

Collapse all

  • pressed boolean

    按钮是否处于按下状态

useToggleToolbarButton

处理折叠工具栏按钮行为的钩子。

State

Collapse all

  • pressed boolean

    按钮是否处于按下状态

Returnsobject

Collapse all

  • props object

    折叠按钮属性

useToggleButtonState

获取折叠按钮状态的钩子。

获取折叠按钮状态

Parameters

Collapse all

  • toggleId string

    折叠元素ID

Returnsobject

Collapse all

  • toggleId string

    折叠元素ID

  • open boolean

    是否处于展开状态

useToggleButton

处理折叠按钮行为的钩子。

处理折叠按钮行为

Parameters

Collapse all

  • toggleId string

    折叠元素ID

  • open boolean

    是否展开状态

Returnsobject

Collapse all

  • toggleId string

    折叠元素ID

  • open boolean

    是否展开状态

  • buttonProps object

    折叠按钮属性

Table of ContentsToggle