ガイドライン
Drawer
ドロワーは同一ウィンドウ内で補助的な情報や操作を一時的に提供するコンポーネントです。

Anatomy: 解剖図

| Item | Name | Description | Component | Optional |
|---|---|---|---|---|
| 1 | Container | コンテナ要素 | — | |
| 2 | Header | ヘッダー要素 | — | |
| 3 | Body | ボディ要素 | — | |
| 4 | Footer | フッター要素 | 任意 |
Options: 選択肢
Size
sm
Smallサイズのモーダルです。横幅は320pxです。

md
Mediumサイズのモーダルです。横幅は512pxです。

lg
Largeサイズのモーダルです。横幅は768pxです。

True (default)
フッターを表示するデフォルトのオプションです。ボディのコンテンツに対するアクションを提示します。

False
フッターを非表示にします。
フッターを非表示にする場合は、ヘッダーのコントロールタイプをデフォルト(Close)にする必要があります。

Behaviors: 振る舞い
オーバーレイ
領域外のアクションを受け付けない場合は、オーバーレイが表示されます。

領域外のクリック
オーバーレイ利用かつ領域外をクリックした際に、ドロワーを閉じるかどうかをオプションで選択することができます。
デフォルトは有効 (クリックでドロワーを閉じる) です。
有効にする場合は、ドロワー内で行った作業内容が失われる可能性に考慮します。
基本的に、領域外のクリックを受け付ける場合は、ドロワー内で情報を提示する用途で使用してください。

コンテンツのオーバーフロー
ディスプレイの表示領域よりもコンテンツが多い場合、コンテンツがオーバーフローされます。
ボディー領域の最下部は、追加コンテンツがあることを示す必要があります。

ドロワーの表示起点
情報の提示文脈に合わせて、上下左右の表示起点を選択することができます。
上下いずれかを起点にして配置する場合は、横幅の定義は破棄され、親要素の横幅に依存します。

Metrics: 寸法
- Vertical resizing: Hug
- Horizontal resizing: Fixed
- Padding top: 16px
- Padding bottom: 16px

Usage: 使い方
Slotの使用方法は、 Sparkle UI for Figma - スロットの使用 をご覧ください。

ヘッダーの閉じるボタンとフッターのキャンセルボタンなどの挙動が重複するアクションを、違う見た目で複数配置しないようにしてください。
一つの挙動に対しては、一貫した識別性を担保するように留意してください。
Contents: 内容

ヘッダータイトルは、ドロワー内のタスクや目的を示すように簡潔に記述してください。また、タスクのアクションの接頭辞として機能するように留意してください。

ヘッダータイトルは改行せずに記述してください。複数行になった場合は、タイトルを再検討してください。
Change log: 変更履歴
| Date | Changes |
|---|---|
| 2025/06/20 | ドキュメントを公開 |
| 2025/06/3 | Figmaを公開 |

