Skip to content

Splitter 分割面板

可调整左右面板宽度的分割组件,支持鼠标拖拽与键盘方向键调整。

基础用法

默认 50/50

左面板

自定义初始比例

30% / 70%

左面板 30%

限制范围

min / max 限制

左面板 20% ~ 80%

调整事件

oas-resize 事件

左侧占比:50%
左面板
拖拽分隔条,或聚焦分隔条后使用 ← / → 方向键调整

API

属性

属性说明类型默认值
max左侧最大占比(%)string90
min左侧最小占比(%)string10
percent左侧面板占比(%)string50

事件

事件说明
oas-resize调整后触发,detail: { percent }

插槽

名称说明
left
right

分隔条 role="separator" + tabindex="0",聚焦后 ← / → 每次调整 1%。