Sheet

npx shadcn@latest add https://kasumi-ui.vercel.app/r/sheet.json

import {
Sheet,
SheetTrigger,
SheetContent,
SheetHeader,
SheetTitle,
SheetDescription,
} from "@/components/ui/sheet";
import { Button } from "@/components/ui/button";

<Sheet>
<SheetTrigger asChild>
  <Button variant="outline">シートを開く</Button>
</SheetTrigger>
<SheetContent>
  <SheetHeader>
    <SheetTitle>設定</SheetTitle>
  </SheetHeader>
  <SheetDescription>
    アプリケーションの設定を変更できます。
  </SheetDescription>
</SheetContent>
</Sheet>

<Sheet>
<SheetTrigger asChild>
  <Button variant="outline">左</Button>
</SheetTrigger>
<SheetContent side="left">
  <SheetHeader>
    <SheetTitle>左からスライド</SheetTitle>
  </SheetHeader>
  <SheetDescription>side="left" のシートです。</SheetDescription>
</SheetContent>
</Sheet>

<Sheet>
<SheetTrigger asChild>
  <Button>プロフィール編集</Button>
</SheetTrigger>
<SheetContent>
  <SheetHeader>
    <SheetTitle>プロフィール編集</SheetTitle>
  </SheetHeader>
  <SheetDescription>
    表示名とメールアドレスを変更できます。
  </SheetDescription>
  <div className="space-y-4 mt-4">
    <div className="space-y-2">
      <Label>表示名</Label>
      <Input variant="outline" placeholder="あさひ" />
    </div>
    <div className="space-y-2">
      <Label>メールアドレス</Label>
      <Input variant="outline" type="email" placeholder="asahi@example.com" />
    </div>
  </div>
  <SheetFooter>
    <SheetClose asChild>
      <Button variant="outline">キャンセル</Button>
    </SheetClose>
    <Button>保存</Button>
  </SheetFooter>
</SheetContent>
</Sheet>