コンポーネント
Sheet
Dialog コンポーネントを拡張したもので、画面のメインコンテンツを補足する内容を表示します。
使い方
import {
Sheet,
SheetContent,
SheetDescription,
SheetHeader,
SheetTitle,
SheetTrigger,
} from "@murasakijs/ui";<Sheet>
<SheetTrigger>Open</SheetTrigger>
<SheetContent side="right">
<SheetHeader>
<SheetTitle>Title</SheetTitle>
<SheetDescription>Description</SheetDescription>
</SheetHeader>
</SheetContent>
</Sheet>バリアント
SheetContent の side プロパティで、画面のどの端からスライドインするかを制御できます。
API リファレンス
SheetContent
| Prop | 型 | デフォルト |
|---|---|---|
side | "top" | "bottom" | "left" | "right" | "right" |
その他のサブコンポーネント
| コンポーネント | 説明 |
|---|---|
Sheet | ルートプリミティブ（Dialog と同じ API）です。 |
SheetTrigger | シートを開く要素です。asChild に対応しています。 |
SheetHeader | SheetTitle / SheetDescription を縦に並べます。 |
SheetFooter | アクションを並べる行で、大きい画面では右寄せになります。 |
SheetTitle | シートのアクセシブルな名前です。 |
SheetDescription | シートのアクセシブルな説明です。 |
SheetClose | シートを閉じるボタンです。asChild に対応しています。 |
Sheet は Dialog と同じ React Aria のモーダル・ダイアログ動作を利用しますが、中央に表示される代わりに画面端からスライドインするようスタイリングされています。