イヌコミ（inucomi）

部品 · Overlays and Menus

オーバーレイとメニュー

メニュー、補足面、コマンド検索、ドロワー、スクロール領域

利用範囲
補足情報とメニュー操作
更新日
2026-07-10

プレビュー

状態と使い方

ドッグカフェ
宿泊施設
トリミングサロン
ドッグラン
動物病院

主な部品

この仕様に含まれるUI

8 件

  • ResponsiveModal

    オーバーレイ

  • Command

    オーバーレイ

  • Drawer

    オーバーレイ

  • DropdownMenu

    オーバーレイ

  • HelpTooltip

    オーバーレイ

  • Popover

    オーバーレイ

  • ScrollArea

    オーバーレイ

  • Tooltip

    オーバーレイ

解剖

  • Trigger

    開く操作をbuttonまたはasChildで意味のある要素へ委譲する。

  • Portal

    親のoverflowやstacking contextから分離して最前面へ描画する。

  • Content

    available height内でスクロールし、項目の読み順をDOM順と揃える。

  • Focus management

    開いた面へfocusを移し、閉じるとtriggerへ戻す。

状態

  • closed

    triggerだけを表示し、非表示面をTab順へ残さない。

  • open

    面、影、境界、現在項目を表示し、背景との階層を分ける。

  • keyboard

    矢印、Enter、Escape、Tabのprimitive標準操作を維持する。

  • overflow

    項目が増えてもviewportを越えず、面内部だけをスクロールする。

仕様値

Menu z-index
10,000
Tooltip z-index
11,000
Drawer overlay
fixed、black 50%、z 9,999
Popover width
default 288px
Command list
max-height 300px
Scroller
single axis、viewport内部scroll

運用ルール

  • 用途で面を選ぶ

    単一資源の操作はMenu、短い補足はPopover、全画面操作はDrawerへ分ける。

  • portalを重ねない

    Dialog内で別の全画面面を重ねず、必要な操作を同じfocus scopeへ収める。

  • スクロールの手掛かりを残す

    切れた軸とscrollbarを視認でき、focusした項目が自動で見える状態にする。

前のコンポーネント選択コントロール次のコンポーネントコンテンツ構造