ActionDock

画面の下に表示する操作バーです。アイコン・名前・ショートカットキーを並べます。

移動のリンクと使えない操作
狭い場所:横にスクロール
右から左に読む場合

使いどころ

  • 開いている一件(スレッドや記事)に対する主な操作を、内容を読みながらいつでも押せるよう、下に浮かべて並べる時に使います。
  • 格子に並べるショートカットや一括操作は、操作バーに載せずに ActionTile を並べます。
  • 対象の近くに置く操作の並びは Toolbar、補助の操作をしまう時は DropdownMenu を使います。

使い方

白いパネル(1px #bbb の枠、角丸5px、外へ約8pxの柔らかい影)を画面の下の中央に浮かべ、items の操作を ActionTile で横に並べます。items の指定は ActionTile と同じで、href があればリンク、無ければボタンになります。

操作バーの中のタイルは普段の白い面と枠を消してパネルの上に平らに置き、ホバーすると淡い黄色の面を出し、押すと黄色の面で内側へへこみます。一つのタイルの幅は5.25rem以上です。

shortcut でショートカットキーの表示を、badge で「下書き」のような状態バッジをアイコンの上に重ねます。キーの登録は利用側が行います。

placement の sticky(既定)は置いた場所の下端に留め、fixed は画面の下に浮かべます。fixed では端末の下端のセーフエリアの上に置きます。操作バーは配置先の幅いっぱいの透明な枠で、中身の幅で親を押し広げません。狭い場所では横にスクロールします。

操作を押した後の処理は、各タイルの onclick や data-* で利用側が行います。

アクセシビリティ

  • 操作バーは nav で、label を名前として読み上げます。タイルは一覧(ul)の項目として並びます。
  • 各タイルはTabキーで順にフォーカスできます。ショートカットキーの表示は読み上げから外します。
  • 強制カラーモードでは、パネルに輪郭線を引きます。

API

ActionDock

内容の下に浮かぶ操作バー。白いパネルを画面の下の中央に浮かべ、アイコン・名前・ショートカットキーの表示を縦に積んだ操作を横に並べる。操作はActionTileで、操作バーの中では普段の面と枠を消して平らにする。

ActionDockのprops
名前型既定値説明
label必須string操作バーの名前。navのaria-labelとして読み上げる。
items必須readonly ActionTileProps[]並べる操作。ActionTileと同じ指定で、hrefがあればリンク、無ければボタンになる。
placement"sticky" | "fixed""sticky"fixedは画面の下の中央に浮かべ、stickyは置いた場所の下端に留める(既定)。

ほかに、<nav>へ標準のHTML属性を渡せます。

読み込むCSS:layers.css、reset.css、tokens.css、base.css、layout.css、components/badge.css、components/action-tile.css、components/icon.css、components/keycap.css、components/action-dock.css

ActionTileProps

ActionTileのpropsと同じです。

コード

HTML
Hono JSX