Splitter

fandhe-frontend-pre-styled-ui の splitter mod が提供するスタイル済み Splitter 部品です。

複数パネルの境界をドラッグでリサイズできる部品です。panel は --fandhe-splitter-size custom property を通じてのみ動的な flex-basis を伝え、resize_trigger は role="separator" + aria-controls を固定付与します。状態機械（Splitter）は headless-ui 側にあり、pre-styled-ui からは再エクスポートしません。

Demo

パネルサイズ状態機械 Splitter の静的掲示（水平 2 パネル・垂直 3 パネル）。resize-trigger は role="separator" + aria-valuemin/max/now（先行パネルのサイズ %）+ aria-controls を持ちます（ドラッグ・キーボード操作は wasm 層のスコープ外）。

Panel A

Panel B

Top

Middle

Bottom

With handle（resize_trigger_indicator を渡した合成パターン）

Panel A

Panel B

Nested（panel の children に別の splitter::root を渡す合成パターン）

One

Two

Three

Features

panel は --fandhe-splitter-size custom property を通じてのみ動的な flex-basis を伝える唯一のパーツ（crates/pre-styled-ui/src/splitter.rs:688-697）
resize_trigger は role="separator" + aria-controls を固定付与する（splitter.rs:930-935）
panel_index が範囲外の場合は style 属性自体を省略する fail-closed 動作（splitter.rs:694-697, 908-913）
resize_trigger_indicator は resize_trigger の children として渡したときのみ描画される（shadcn/ui withHandle prop 相当の合成パターン、イシュー #2038）
resize_trigger は ::after で視覚上の太さを変えずに当たり判定のみを外側へ拡張する（data-orientation で拡張方向を切り替え、--fandhe-splitter-hit-extension で拡張幅を上書き可、イシュー #2202）

Anatomy

root
  panel
  resize-trigger
    resize-trigger-indicator

API Reference

Arguments

Name	Type	Default	Description
`disabled`	`bool`	`false`	root/resize_trigger の無効化状態（splitter.rs:672-686）。

Data Attributes

Part	Attribute	Observed Values
`panel`	`data-id`	`showcase-splitter-h-panel-a`, `showcase-splitter-h-panel-b`, `showcase-splitter-nested-inner-panel-a`, `showcase-splitter-nested-inner-panel-b`, `showcase-splitter-nested-outer-panel-a`, `showcase-splitter-nested-outer-panel-b`, `showcase-splitter-v-panel-0`, `showcase-splitter-v-panel-1`, `showcase-splitter-v-panel-2`, `showcase-splitter-wh-panel-a`, `showcase-splitter-wh-panel-b`
`panel`	`data-index`	`0`, `1`, `2`
`panel`	`data-orientation`	`horizontal`, `vertical`
`resize-trigger`	`data-id`	`showcase-splitter-h-panel-a:showcase-splitter-h-panel-b`, `showcase-splitter-nested-inner-panel-a:showcase-splitter-nested-inner-panel-b`, `showcase-splitter-nested-outer-panel-a:showcase-splitter-nested-outer-panel-b`, `showcase-splitter-v-panel-0:showcase-splitter-v-panel-1`, `showcase-splitter-v-panel-1:showcase-splitter-v-panel-2`, `showcase-splitter-wh-panel-a:showcase-splitter-wh-panel-b`
`resize-trigger`	`data-orientation`	`horizontal`, `vertical`
`root`	`data-orientation`	`horizontal`, `vertical`

CSS Variables

Variable	Default
`--fandhe-splitter-hit-extension`	`0.25rem`
`--fandhe-splitter-hit-inset`	—
`--fandhe-splitter-panel-padding`	`var(--fandhe-space-3)`
`--fandhe-splitter-root-disabled-hover-bg`	`var(--fandhe-palette-emphasized, var(--fandhe-color-accent-emphasized))`
`--fandhe-splitter-size`	`auto`
`--fandhe-splitter-trigger-size`	`0.25rem`

Examples

Two panels

50/50 の 2 パネルと resize_trigger 1 個の例です。

With handle

resize_trigger_indicator を渡すとハンドル中央にグリップ表現が付きます。

Nested

panel の children に別の splitter::root を渡すと入れ子構成になります。

One

Two

Three

Accessibility

WAI-ARIA

Attribute	Description
role="separator" + aria-controls（resize_trigger）	リサイズハンドルが操作対象パネルを aria-controls で指し示す（splitter.rs:930-935）。