Docs
Column

Column

Add Columns to your document.

Column ElementColumn Group Element

🌻 Column

Create column and the border will hidden when viewing
left
right


Features

  • Add columns to your document.
  • Choose from a variety of column layouts using column-group-element toolbar.
  • Resizable columns

Installation

npm install @udecode/plate-layout

Usage

// ...
import { createColumnPlugin } from '@udecode/plate-layout';
 
const plugins = [
  // ...otherPlugins,
  createColumnPlugin(),
];

API

createColumnPlugin

Add Column Plugin to your document.

TColumnGroupElement

Attributes

Collapse all

    Extends TElement.

    Set the width of it’s children Column

TColumnElement

Attributes

Collapse all

    Extends TElement.

    The Column's width end with %

insertColumnGroup

Insert an columnGroup with two empty column.

Parameters

Collapse all

    The editor instance.

insertEmptyColumn

Insert an empty column. You can set the with by options.width default is "33%"

Parameters

Collapse all

    The editor instance.

    InsertNodesOptions and with to set the insert behavior.

moveMiddleColumn

Move the middle column to the left of right by options.direction. if the middle node is empty return false and remove it.

Parameters

Collapse all

    The editor instance.

    The node entry of column element

    Control the middle column move to

setColumnWidth

Set the width of ColumnGroup's children.In general you don't need to use this function,Since we will call this function automatically when the property of layout changed. If you want to set the layout use setNodes.

Parameters

Collapse all

    The editor instance.

    the path ref of ColumnGoup

    The element property of layout

API Components

useColumnState

Returns

Collapse all

    Call this function make the ColumnGroup's children, column bisects the parent element space.This nature is set the layout property of ColumnGroup to [50,50]

    Set the layout property of ColumnGroup to [33, 33, 33]

    Set the layout property of ColumnGroup to [70,30]

    Set the layout property of ColumnGroup to [30,70]

    Set the layout property of ColumnGroup to [25, 50, 25]

useDebouncePopoverOpen

Returns

Collapse all

    Control the popover is open or not
CommentsDate