#分割窗格

Split Pane 为编辑器、检查器、调用链详情与智能体对话创建可通过指针和键盘调整大小的区域。

npm install @a3s-lab/ui

<div class="split-pane" data-value="40">
  <section>Primary pane</section>
  <hr role="separator" aria-label="Resize inspector" data-min="20" data-max="80" data-step="5" />
  <section>Secondary pane</section>
</div>
<script type="module">
  import "@a3s-lab/ui/runtime";
  import "@a3s-lab/ui/split-pane";
</script>

import "@a3s-lab/ui/a3s.css";
import "@a3s-lab/ui/all";

#用法

在加载运行时之前分割控制器，或使用组合的 JavaScript 包。

<div class="split-pane" data-value="40">
  <section>Primary pane</section>
  <hr role="separator" aria-label="Resize inspector" data-min="20" data-max="80" data-step="5" />
  <section>Secondary pane</section>
</div>
<script type="module">
  import "@a3s-lab/ui/runtime";
  import "@a3s-lab/ui/split-pane";
</script>

#参数

#JavaScript API

window.a3sUI.refresh(splitPane) 重新读取参数。根在拖动时连续发出 a3s:split-input，并在提交的指针或键盘更改后发出 a3s:split-change。事件详细信息包含 { value, orientation }。

#状态和变体

在分隔符上设置 aria-disabled="true" 可禁用调整。垂直布局会切换分隔方向与键盘轴；RTL 并排布局会自动反转水平方向的值增长。

#可访问性

控制器会设置分隔符方向、取值边界、当前值、百分比文本与键盘焦点。方向键按 data-step 调整；Home 与 End 移动到边界；双击恢复默认值。