UI Component Lab English

← コンポーネント一覧

アクション

Split button スプリットボタン

よく使う操作のボタンと、関連する操作のメニューを開く小さな矢印ボタンをつなげた部品。

デモ

別名

見分けるポイント

1つのボタンが細い線で2つに分かれ、ラベルのある本体と、下向き矢印だけの細い部分からなる。

挙動

  • 本体を押すと、既定の操作がすぐに実行される。
  • 矢印を押すと他の操作のメニューが開き、選ぶとその操作を実行してメニューが閉じる。
  • 2つの部分は別々のボタンで、それぞれ Tab でフォーカスできる。

キーボード操作

キー動作
Tab本体のボタンと矢印のボタンの間を移動する。
Enter / Space本体では既定の操作を実行する。矢印ではメニューを開き、最初の項目にフォーカスする。
↓ / ↑矢印ではメニューを開く。メニュー内では項目を移動する。
Escメニューを閉じ、矢印のボタンにフォーカスを戻す。
  • メニュー: スプリットボタンは主な操作を1回で実行でき、残りをメニューにしまう。メニューボタンは押してもメニューを開くだけ。
  • ボタン: ボタンは操作が1つだけで、スプリットボタンはその横に関連する操作のメニューが付く。

出典