跳到主要内容

SplitPane可拖拽分栏

把一块区域分成两栏，中间一条可以拖动的分隔条。分隔条本身是透明的，中间一枚小把手；能拖、能用键盘调、双击复位。自身变窄时自动改成上下堆叠：看的是自己的宽度，不是视口。

示例

左右分栏（受控）

拖动中间的把手；或者 ⇥ 聚焦它，用 ← → 调整（按住 ⇧ 步子更大），↩ 或双击回到初始值。演示框窄于 520px 时自动堆叠。

第一栏 36%
列表
详情

上下分栏

orientation="vertical"。上下分栏本来就是堆叠的，不受 stackBelow 影响。

编辑器
终端

API

属性

属性类型默认值说明
children*ReactNode—正好两个子节点：第一栏和第二栏。
orientation'horizontal' | 'vertical''horizontal'分栏方向：左右或上下。
valuenumber—第一栏占的百分比（受控），0–100。
defaultValuenumber50初始百分比（非受控）；双击分隔条或按 Enter 回到这个值。
onChange(value: number) => void—大小变化时触发，参数是新的百分比（保留一位小数）。
min / maxnumber20 / 80第一栏的最小 / 最大百分比。
stepnumber2方向键每次调整的百分比；按住 Shift 为 10。
stackBelow'sm' | 'md' | 'lg' | 'xl' | false'md'自身宽度小于该断点时改为上下堆叠（不可拖拽）。false 关闭。
stackedboolean—强制堆叠 / 不堆叠，忽略 stackBelow。
separatorLabelstring'调整分栏大小'分隔条的无障碍名称。
…restHTMLAttributes—ref、className、style 和其余原生属性透传到根节点。

无障碍

  • 分隔条是可聚焦的 role="separator"，带 aria-valuenow / min / max、aria-orientation 和指向第一栏的 aria-controls。
  • 键盘：← →（上下分栏为 ↑ ↓）按 step 调整，Shift 加方向键一次 10%，Home / End 到最小 / 最大，Enter 复位。
  • 堆叠之后分隔条不再可聚焦、不再响应拖拽，只是一条普通的分隔。
  • 触屏上分隔条的可点按宽度从 12px 加到 20px。两栏各自滚动；栏里的内容多时给它们各自一个带名字的滚动区域。
  • 页面上有多个分栏时用 separatorLabel 说清楚调的是什么（“调整列表宽度”）。