For AI agents: the complete documentation index is available at https://a3s-lab.github.io/UI/v0.2.0/llms.txt, the full documentation bundle is available at https://a3s-lab.github.io/UI/v0.2.0/llms-full.txt, and this page is available as Markdown at https://a3s-lab.github.io/UI/v0.2.0/components/split-pane.md.
  • 简体中文
  • v0.2.0
  • 分割窗格

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

    Live previewHTML · CSS · JavaScript
    Trace

    POST /v1/agent/run

    gateway.receive12.4 ms
    provider.complete842 ms

    Span 详情

    状态
    OK
    模型
    coding-agent
    Tokens
    12,408
    耗时
    854.6 ms

    用途

    在加载运行时之前分割控制器,或使用组合的 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>

    参数

    参数可选值默认目的
    data-orientationhorizontalverticalhorizontal窗格流;水平并排放置窗格
    data-directionnormalreversenormal逆转价值增长
    data-value0–10050初始主窗格百分比
    分离器 data-min数量15最低百分比
    分离器 data-max数量85最大百分比
    分离器 data-step数量5键盘增量
    分离器 data-default-value数量初始值双击重置值
    --split-pane-min-heightCSS 长度18rem最小元件高度
    --split-handle-sizeCSS 长度0.5rem可见分隔轨道
    --split-hit-sizeCSS 长度1.5rem指针命中区;粗略指针下扩展为 2.75rem

    JavaScript API

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

    状态和变体

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

    可访问性

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