本文へ移動

§10-08Layout

Split view (resizable)

左右のペインの境界をドラッグして幅を変える。

2 つの内容を並べて見比べ、必要に応じて片方を広げられる。エディタとプレビューや一覧と詳細のように、同時に見たい組み合わせに向く。

実装のポイント

ドラッグは Pointer Events と setPointerCapture で境界外でも追従させる。分割バーは role=separator と aria-valuenow を付け、矢印キーでも動かす。

特徴
  • ジェスチャー
  • 状態管理
デモで使っているもの
  • Pointer Events