Splitter ^(beta)

Divide the area horizontally or vertically, and freely drag to adjust the size of each area.

Basic usage

The most basic usage, if no default size is passed, it will be automatically divided equally.

export function SplitterBasic() {  return (    <div style={container}>      <ElSplitter>        <ElSplitterPanel size="30%">          <DemoPanel>1</DemoPanel>        </ElSplitterPanel>        <ElSplitterPanel min={200}>          <DemoPanel>2</DemoPanel>        </ElSplitterPanel>      </ElSplitter>    </div>  );}

Vertical

Use vertical orientation.

export function SplitterVertical() {  return (    <div style={container}>      <ElSplitter layout="vertical">        <ElSplitterPanel>          <DemoPanel>1</DemoPanel>        </ElSplitterPanel>        <ElSplitterPanel>          <DemoPanel>2</DemoPanel>        </ElSplitterPanel>      </ElSplitter>    </div>  );}

Collapsible

Configuring collapsible provides quick shrinking capability. You can use the min property to prevent expanding through dragging after collapsing.

enable

export function SplitterCollapsible() {  const [isCollapsible, setIsCollapsible] = useState(true);  return (    <div>      <ElSwitch        className={styles.switch}        checked={isCollapsible}        onCheckedChange={setIsCollapsible}        activeText="enable"        inactiveText="disable"        inlinePrompt      />      <div style={container}>        <ElSplitter>          <ElSplitterPanel collapsible={isCollapsible} min="50">            <DemoPanel>1</DemoPanel>          </ElSplitterPanel>          <ElSplitterPanel collapsible={isCollapsible}>            <DemoPanel>2</DemoPanel>          </ElSplitterPanel>          <ElSplitterPanel>            <DemoPanel>3</DemoPanel>          </ElSplitterPanel>          <ElSplitterPanel collapsible={isCollapsible}>            <ElSplitter layout="vertical">              <ElSplitterPanel collapsible={isCollapsible}>                <DemoPanel>4</DemoPanel>              </ElSplitterPanel>              <ElSplitterPanel collapsible={isCollapsible}>                <DemoPanel>5</DemoPanel>              </ElSplitterPanel>            </ElSplitter>          </ElSplitterPanel>        </ElSplitter>      </div>    </div>  );}

Disable drag

When either panel disables resizable, dragging will be disabled.

disable

drag disable

export function SplitterDisableDrag() {  const [resizable, setResizable] = useState(false);  return (    <div>      <ElSwitch        className={styles.switch}        checked={resizable}        onCheckedChange={setResizable}        activeText="enable"        inactiveText="disable"        inlinePrompt      />      <div style={container}>        <ElSplitter>          <ElSplitterPanel>            <DemoPanel>1</DemoPanel>          </ElSplitterPanel>          <ElSplitterPanel resizable={resizable}>            <DemoPanel>{`drag ${resizable ? "enable" : "disable"}`}</DemoPanel>          </ElSplitterPanel>          <ElSplitterPanel>            <DemoPanel>3</DemoPanel>          </ElSplitterPanel>        </ElSplitter>      </div>    </div>  );}

Panel size

v-model:size can get the panel size.

100px

export function SplitterSize() {  const [size, setSize] = useState<number>(100);  const handleResizeStart = (index: number, sizes: number[]) => {    console.log("resizeStart", index, sizes);  };  const handleResize = (index: number, sizes: number[]) => {    console.log("resize", index, sizes);  };  const handleResizeEnd = (index: number, sizes: number[]) => {    console.log("resizeEnd", index, sizes);  };  return (    <div style={container}>      <ElSplitter        onResizeStart={handleResizeStart}        onResize={handleResize}        onResizeEnd={handleResizeEnd}      >        <ElSplitterPanel>          <DemoPanel>1</DemoPanel>        </ElSplitterPanel>        <ElSplitterPanel          size={size}          onSizeChange={setSize}          min={50}          max={200}        >          <DemoPanel>{`${size}px`}</DemoPanel>        </ElSplitterPanel>        <ElSplitterPanel>          <DemoPanel>3</DemoPanel>        </ElSplitterPanel>      </ElSplitter>    </div>  );}

Lazy 2.11.0

When lazy is enabled, the panel size will not update in real time during dragging, but only after the drag ends.

export function SplitterLazy() {  return (    <div style={container}>      <ElSplitter lazy>        <ElSplitterPanel collapsible min="50">          <DemoPanel>1</DemoPanel>        </ElSplitterPanel>        <ElSplitterPanel collapsible>          <DemoPanel>2</DemoPanel>        </ElSplitterPanel>        <ElSplitterPanel collapsible>          <DemoPanel>3</DemoPanel>        </ElSplitterPanel>      </ElSplitter>    </div>  );}

Splitter API

Splitter Attributes

Name	Description	Type	Default
layout	Layout direction of the splitter	`enum`	horizontal
lazy 2.11.0	Whether to enable lazy mode	`boolean`	false

Splitter Events

Name	Description	type
resize-start	Triggered when starting to resize a panel, `index` is the drag bar index	`Function`
resize	Triggered while resizing a panel, `index` is the drag bar index	`Function`
resize-end	Triggered when panel resizing ends, `index` is the drag bar index	`Function`
collapse 2.10.3	Triggered when a panel is collapsed, `index` is the drag bar index	`Function`

SplitterPanel API

SplitterPanel Attributes

Name	Description	Type	Default
size / v-model:size	Size of the panel (in pixels or percentage)	`string` / `number`	-
min	Minimum size of the panel (in pixels or percentage)	`string` / `number`	-
max	Maximum size of the panel (in pixels or percentage)	`string` / `number`	-
resizable	Whether the panel can be resized	`boolean`	true
collapsible	Whether the panel can be collapsed	`boolean`	false

SplitterPanel Events

Name	Description	type
update:size	Triggered when panel size changes	`Function`

SplitterPanel Slots

Name	Description
default	Default content of the panel
start-collapsible	Custom content for the start collapsible button
end-collapsible	Custom content for the end collapsible button

SplitterPanel Exposes

Name	Description	Type
splitterPanelRef 2.11.9	SplitterPanel html element	`object`