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

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）

Anatomy

root
  panel
  resize-trigger

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-orientation	horizontal, vertical
resize-trigger	data-orientation	horizontal, vertical
root	data-orientation	horizontal, vertical

CSS Variables

Variable	Default
--fandhe-splitter-size	auto
--fandhe-splitter-trigger-size	0.25rem

Examples

Two panels

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

Accessibility

WAI-ARIA

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