Docs
シート

シート

Dialog コンポーネントを拡張して、画面のメインコンテンツを補完するコンテンツを表示します。

DocsAPI Reference

インストール

npx shadcn-ui@latest add sheet

使い方

import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"
<Sheet>
  <SheetTrigger>開く</SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>本当に削除しますか?</SheetTitle>
      <SheetDescription>
        このアクションは元に戻せません。アカウントは完全に削除され、データはすべてサーバーから削除されます。
      </SheetDescription>
    </SheetHeader>
  </SheetContent>
</Sheet>

例

サイド

side プロパティを <SheetContent /> に使用して、コンポーネントが表示される画面の端を指定します。値は top、right、bottom、または left にできます。

サイズ

CSS クラスを使用してシートのサイズを調整できます。

<Sheet>
  <SheetTrigger>開く</SheetTrigger>
  <SheetContent className="w-[400px] sm:w-[540px]">
    <SheetHeader>
      <SheetTitle>本当に削除しますか?</SheetTitle>
      <SheetDescription>
        このアクションは元に戻せません。アカウントは完全に削除され、データはすべてサーバーから削除されます。
      </SheetDescription>
    </SheetHeader>
  </SheetContent>
</Sheet>