Splitter

Covers Arco Split use cases while keeping Element Plus panels and resize bars with Arco colors. See the Element Plus docs for props.

Collapsible Panels

Drag the divider to resize panels; collapsible enables collapse controls.

Left panel

Right panel

<template>
  <el-splitter style="height: 200px; width: 100%">
    <el-splitter-panel collapsible><div style="padding: 16px">Left panel</div></el-splitter-panel>
    <el-splitter-panel collapsible><div style="padding: 16px">Right panel</div></el-splitter-panel>
  </el-splitter>
</template>

Vertical Layout

Set layout="vertical" to stack panels vertically.

Top panel

Bottom panel

<template>
  <el-splitter layout="vertical" style="height: 200px; width: 100%">
    <el-splitter-panel><div style="padding: 16px">Top panel</div></el-splitter-panel>
    <el-splitter-panel><div style="padding: 16px">Bottom panel</div></el-splitter-panel>
  </el-splitter>
</template>

Differences from Arco

• Resize bars and collapse buttons keep the Element Plus structure rather than Arco's drag-handle design.