Column

Add columns to your document.

Column ElementColumn Group Element
Loading...
Files
components/demo.tsx
'use client';

import React from 'react';

import { Plate } from '@udecode/plate-common/react';

import { editorPlugins } from '@/components/editor/plugins/editor-plugins';
import { useCreateEditor } from '@/components/editor/use-create-editor';
import { Editor, EditorContainer } from '@/components/plate-ui/editor';

import { DEMO_VALUES } from './values/demo-values';

export default function Demo({ id }: { id: string }) {
  const editor = useCreateEditor({
    plugins: [...editorPlugins],
    value: DEMO_VALUES[id],
  });

  return (
    <Plate editor={editor}>
      <EditorContainer variant="demo">
        <Editor />
      </EditorContainer>
    </Plate>
  );
}

Features

  • 向文档添加列。
  • 使用 column-group-element 工具栏选择多种列布局。
  • 可调整列大小

Installation

npm install @udecode/plate-layout

Usage

import { ColumnPlugin, ColumnItemPlugin } from '@udecode/plate-layout/react';
 
const plugins = [
  // ...otherPlugins,
  ColumnPlugin,
];

Plugins

ColumnPlugin

向文档添加列插件。

ColumnItemPlugin

向文档添加列项插件。

API

TColumnGroupElement

Attributes

    Extends TElement.

TColumnElement

Attributes

Collapse all

    Extends TElement.

    列宽度以 % 结尾。

insertColumnGroup

插入一个包含两个空列的列组。

Parameters

Collapse all

    编辑器实例。

    • columns: 列宽度数组或等宽列数（默认：2）
    • 其他 InsertNodesOptions 以控制插入行为

insertColumn

插入一个空列。你可以通过 options.width 设置宽度，默认是 "33%"。

Parameters

Collapse all

    编辑器实例。

    插入行为和宽度设置。

moveMiddleColumn

将中间列向左或向右移动，通过 options.direction 设置。如果中间节点为空，返回 false 并删除它。

Parameters

Collapse all

    编辑器实例。

    列元素的节点入口。

    控制中间列的移动方向。

toggleColumnGroup

将一个块转换为列组布局或更新现有列组的布局。

Parameters

Collapse all

    编辑器实例。

行为：

  • 如果目标块不是列组，则将其包裹在新的列组中，并使用指定的列数
  • 如果目标块已经是列组，则使用 setColumns 更新其列布局
  • 原始内容成为第一个列的内容
  • 额外的列创建为空段落

setColumns

更新现有列组的列布局，通过修改列数和宽度。

Parameters

Collapse all

    The editor instance.

行为：

  • 增加列数时：
    • 保留现有列内容
    • 添加新空列，指定宽度
  • 减少列数时：
    • 将删除列的内容合并到剩余列中
    • 更新剩余列的宽度
  • 保持相同数量的列时：
    • 仅更新列宽度

API Components

useDebouncePopoverOpen

Returns

Collapse all

    控制 popover 是否打开
CollaborationCombobox