スプリッター

hc-splitter は 2 つのペインを可動ハンドルで分割します — shadcn の Resizable 相当。WAI-ARIA の Window Splitter パターンに従います: ハンドルはフォーカス可能な role="separator" で、その aria-valuenow がプライマリペインのサイズを追跡します。installSplitter がポインタの ドラッグ、キーボードでのリサイズ、ARIA を配線します。レイアウトは 単一の --hc-splitter-pos カスタムプロパティで駆動される素の flexbox です。

別名: 分割ペイン、リサイズ可能ペイン。

基本の HTML

コンテナに交差軸のサイズを与えます(デフォルトの水平レイアウトでは 高さ)。

PreviewCode

Primary pane

Secondary pane

<div class="hc-splitter" data-orientation="horizontal" data-value="40"
     style="block-size:10rem">
  <div class="hc-splitter__panel">Primary pane</div>
  <div class="hc-splitter__handle" role="separator" tabindex="0"
       aria-label="Resize panels"></div>
  <div class="hc-splitter__panel">Secondary pane</div>
</div>

import { installSplitter } from '@hypermedia-components/core';
installSplitter(); // idempotent; returns an uninstaller

ゼロ設定の @hypermedia-components/core/behaviors エントリは自動で インストールし、htmx でスワップされた内容も自動で拾います。

縦方向

data-orientation="vertical" はペインを縦に積み、水平のハンドルに します。

PreviewCode

Top

Bottom

<div class="hc-splitter" data-orientation="vertical" data-value="40"
     style="block-size:14rem">
  <div class="hc-splitter__panel">Top</div>
  <div class="hc-splitter__handle" role="separator" tabindex="0"
       aria-label="Resize panels"></div>
  <div class="hc-splitter__panel">Bottom</div>
</div>

設定

属性	用途
data-orientation	horizontal(デフォルト、横並び)または vertical(縦積み)。
data-value	プライマリペインの初期サイズ。パーセント(デフォルト 50)。
data-min / data-max	許容範囲。パーセント(デフォルト 10 / 90)。
data-step	キーボードのステップ。パーセント(デフォルト 5)。
data-collapsible	ハンドルのダブルクリック / Enter でプライマリペインを折りたたみ ↔ 直前の開いたサイズにトグル。
data-persist	localStorage のキー — 位置を保存・復元します(0 の永続値は折りたたみを復元)。

キーボード

Tab でハンドルへ移動し、次を使います:

キー	動作
← / →(水平)または ↑ / ↓(垂直)	1 ステップ分リサイズ
Home	最小サイズ
End	最大サイズ
Enter	折りたたみのトグル(data-collapsible のとき)

DOM のフォーカスはハンドル上にあります。aria-valuenow / aria-valuemin / aria-valuemax が支援技術にプライマリペインの サイズを説明します。

変更イベント

リサイズのたびにコンテナ上でバブリングする hc:splitterchange を ディスパッチします:

splitter.addEventListener('hc:splitterchange', (e) => {
  const { value, collapsed, orientation } = e.detail; // value: primary-pane %
});

collapsed はプライマリペインが折りたたまれている間 true です (下記参照)。

折りたたみ

data-collapsible を足すと、ハンドルでプライマリペインを折りたたんだり 戻したりできます。ハンドルをダブルクリックするか、フォーカスして Enter を押すと、折りたたみ(0%)と直前の開いたサイズの間で トグルします。

PreviewCode

Primary pane — double-click the handle

Secondary pane

<div class="hc-splitter" data-orientation="horizontal" data-value="40" data-collapsible
     style="block-size:10rem">
  <div class="hc-splitter__panel">Primary pane</div>
  <div class="hc-splitter__handle" role="separator" tabindex="0"
       aria-label="Resize panels"></div>
  <div class="hc-splitter__panel">Secondary pane</div>
</div>

折りたたまれたスプリッターはコンテナに data-collapsed を持ちます — ペインはそれを基にスタイルしてください — そして hc:splitterchange は detail.collapsed を報告します。ハンドルの aria-valuenow は [min, max] の範囲内にとどまります。折りたたみ状態は範囲外の値では なく data-collapsed に乗ります。

永続化

data-persist="<key>" を足すと位置を localStorage にミラーリングし、 次の訪問で復元します。0 の永続値は折りたたみ状態を復元します。 ストレージの失敗(プライベートモード、無効化)は data-value の デフォルトへ静かにフォールバックします。

<div class="hc-splitter" data-orientation="horizontal"
     data-collapsible data-persist="editor:sidebar" style="block-size:10rem">
  …
</div>

Hyperscript

よくある localStorage のケースは data-persist がカバーします。 カスタムなストレージ(クッキー、サーバとの往復、異なるキー形状)が 必要なときは Hyperscript を使ってください:

<div class="hc-splitter" data-orientation="horizontal"
     _="on hc:splitterchange call myStore.set('split', event.detail.value)">
  …
</div>

さらなるパターン: Hyperscript → コンポーネントイベントへの反応。

ペインを畳む

ペインは自分の中身の幅まで畳めます — 戻すためのコントロールを持つ レールになります。

<div class="hc-splitter__panel" data-collapsed>
  <button class="hc-button" data-size="sm" type="button">Reasons (5)</button>
</div>

data-collapsed はペインを中身のサイズにし、空いた分を反対側のペインに 渡し、ドラッグハンドルを隠します（掴むものが無いからです）。この状態は ペインの中身を持っている側のものなので、その領域を再描画するサーバーは、 すでに送っているフラグメントに付けるだけで済みます。クライアント状態は 無く、2 つのペインが食い違うこともありません。

**畳む先はレールであって、無ではありません。**閉じたら消えるパネルは 行き止まりです。閉じた本人が二度と見つけられません。

アクセシビリティ

• ハンドルは role="separator" + tabindex="0" で、 aria-valuenow / aria-valuemin / aria-valuemax と、プライマリ ペインを指す aria-controls を持ちます(APG の Window Splitter パターンどおり)。
• セパレータの aria-orientation は自動で設定されます(横並びの分割は vertical のセパレータ線を使い、逆も同様)。
• ハンドルには aria-label か aria-labelledby(プライマリペインの 見出し)でアクセシブルな名前を与えてください。

テーマ用トークン

トークンパス	用途
splitter.handle-size	ハンドルの太さ(ヒットエリア)。
splitter.handle-bg / handle-hover-bg	ハンドルの背景(ホバー / フォーカスは data-color で色づけ)。
splitter.grip-color / grip-active-color	中央のグリップバー。
splitter.grip-length / grip-thickness	グリップの寸法。

CSS 変数

生成される CSS 変数を表示

--hc-splitter-handle-size | -handle-bg | -handle-hover-bg
--hc-splitter-grip-color | -grip-active-color | -grip-length | -grip-thickness
--hc-splitter-pos   (runtime: the primary pane's size, set by installSplitter)

対象外

3 つ以上のペイン、ネストしたスプリッター、ピクセルベースの最小値は 先送りです。

関連

• セパレータ — 静的で非インタラクティブな区切り。
• カード — ペインの よくあるコンテンツ。