Drawer

画面の左または右からスライドインするパネルコンポーネントです。詳細表示やフォーム、設定パネルのオーバーレイ表示に使用します。

Basic

jui-drawer の最も基本的な使用例です。ボタンをクリックするとドロワーが開きます。

Sizes

size プロパティで幅を変更できます。sm（320px）、md（480px）、lg（640px）、xl（800px）から選べます。

Placement

placement プロパティで左右の出現方向を指定できます。

アクセシビリティ

• WAI-ARIA:
  • ルートの対話型要素に role="dialog"、aria-modal="true" が付加されます。
  • タイトルが設定されている場合、ダイアログに aria-labelledby を自動で紐付けます。
• フォーカストラップと制御:
  • ドロワーが開かれた際、パネル内にフォーカスが自動的に移動します。
  • 開いている間はフォーカスがパネル外に出ないように制限（フォーカストラップ）されます。
  • ドロワーが閉じられた際、元のトリガー要素にフォーカスが自動で復元されます。
• キーボードナビゲーション:
  • Escape キーを押すことでドロワーを閉じることができます。
  • Tab / Shift + Tab キーでパネル内のフォーカス可能要素を巡回できます。

CSS カスタムプロパティ

このコンポーネント固有のカスタムプロパティはありません。グローバルのデザイントークン（--jui-z-modal, --jui-color-overlay, --jui-color-background, --jui-radius-lg 等）を参照して描画されます。

ブラウザ対応

このコンポーネントが使用しているブラウザ機能と対応状況です。

機能	用途	Chrome	Firefox	Safari	ステータス
CSS Transitions	スライドアニメーション	26+	16+	9+	Baseline 2014
:focus-visible	キーボードフォーカス制御	86+	85+	15.4+	Baseline 2022
CSS 変数 (var())	デザイントークン・カラー適用	49+	31+	9.1+	Baseline 2017

💡 いずれの機能も主要ブラウザで広く対応済みです。

関連コンポーネント

• Modal — オーバーレイダイアログ表示に
• Button — ドロワー内のアクションボタンとして使用
• Card — コンテンツをカード形式でまとめる際に

プロパティ

コンポーネントが受け付ける属性（Props）の一覧と詳細仕様です。

Property	Attribute	Description	Type	Default
closeLabel	close-label	閉じるボタンのアクセシビリティラベル（i18n対応）	string	'閉じる'
closeOnOverlay	close-on-overlay	オーバーレイクリックで閉じるかどうか	boolean	true
drawerTitle	drawer-title	ドロワーのタイトル	string	''
hasOverlay	has-overlay	オーバーレイの表示有無	boolean	true
open	open	ドロワーの開閉状態	boolean	false
placement	placement	ドロワーの出現方向	"left" | "right"	'right'
size	size	ドロワーの幅サイズ	"lg" | "md" | "sm" | "xl"	'md'

イベント

コンポーネントから発火するカスタムイベントの一覧です。

Event	Description	Type
juiClose	ドロワーが閉じられた時に発火するイベント	CustomEvent<{ reason: "button" | "escape" | "overlay"; }>

スロット

コンポーネント内に子要素を挿入するためのスロット一覧です。

Slot	Description
	ドロワー本体（デフォルトスロット）
"footer"	フッター領域

シャドウパーツ

CSSから直接スタイリング可能な内部要素（Parts）の一覧です。

Part	Description
"body"	本文領域
"close-button"	閉じるボタン
"drawer"	ドロワーパネル
"footer"	フッター領域
"header"	ヘッダー領域
"overlay"	オーバーレイ背景
"title"	タイトルテキスト

---

Built with StencilJS