For AI agents: the complete documentation index is available at https://a3s-lab.github.io/UI/en/llms.txt, the full documentation bundle is available at https://a3s-lab.github.io/UI/en/llms-full.txt, and this page is available as Markdown at https://a3s-lab.github.io/UI/en/components/split-pane.md.
A3S UI
  • English
  • next

      • Split Pane

      Split Pane creates keyboard- and pointer-resizable regions for editors, inspectors, trace details, and agent conversations.

      Live previewHTML · CSS · JavaScript
      Trace

      POST /v1/agent/run

      gateway.receive12.4 ms
      provider.complete842 ms

      Span details

      Status
      OK
      Model
      coding-agent
      Tokens
      12,408
      Duration
      854.6 ms

      Usage

      Load the runtime before the Split Pane controller, or use the combined JavaScript bundle.

      <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>

      Parameters

      ParameterValuesDefaultPurpose
      Root data-orientationhorizontal, verticalhorizontalPane flow; horizontal places panes side by side
      Root data-directionnormal, reversenormalReverses value growth
      Root data-value0–10050Initial primary pane percentage
      Separator data-minnumber15Minimum percentage
      Separator data-maxnumber85Maximum percentage
      Separator data-stepnumber5Keyboard increment
      Separator data-default-valuenumberinitial valueDouble-click reset value
      --split-pane-min-heightCSS length18remMinimum component height
      --split-handle-sizeCSS length0.5remVisible separator track
      --split-hit-sizeCSS length1.5remPointer hit area; expands to 2.75rem on coarse pointers

      JavaScript API

      window.a3sUI.refresh(splitPane) rereads parameters. The root emits a3s:split-input continuously while dragging and a3s:split-change after a committed pointer or keyboard change. Event detail contains { value, orientation }.

      States and variants

      Set aria-disabled="true" on the separator to disable resizing. Vertical layout stacks the panes and changes the separator keyboard axis. RTL side-by-side layouts reverse pointer growth automatically.

      Accessibility

      The controller adds separator orientation, value bounds, current value, percentage text, and keyboard focus. Arrow keys resize by data-step; Home and End move to bounds; double click restores the default.