Sheet

画面の端から出るパネル。

画面の端から滑り出すパネルです。フィルタ一式や詳細の編集など、モーダルより広い面積が要る場面に向いています。

export const client = "only";

import {
  Sheet,
  SheetTrigger,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetDescription,
  SheetFooter,
  SheetClose,
  Button,
  Label,
  Input,
} from "@squadbase/vantage/ui";

export default function Example() {
  return (
    <Sheet>
      <SheetTrigger render={<Button variant="outline" />}>フィルタ</SheetTrigger>
      <SheetContent side="right">
        <SheetHeader>
          <SheetTitle>絞り込み</SheetTitle>
          <SheetDescription>条件は「適用」を押すまで反映されません。</SheetDescription>
        </SheetHeader>
        <div className="grid gap-2 px-4">
          <Label htmlFor="min">金額の下限</Label>
          <Input id="min" type="number" defaultValue={0} />
        </div>
        <SheetFooter>
          <SheetClose render={<Button variant="outline" />}>閉じる</SheetClose>
          <Button>適用</Button>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  );
}

import {
  Sheet,
  SheetTrigger,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetDescription,
  SheetFooter,
  SheetClose,
} from "@squadbase/vantage/ui";

構成は Dialog と同じで、違うのは出てくる向きだけです。

PropType

side?"top" | "right" | "bottom" | "left"

`SheetContent` に渡す。どの端から出すか。

Type"top" | "right" | "bottom" | "left"

Default"right"

SheetTitle は支援技術のために必須です。見せたくない場合も置いた上で className="sr-only" にしてください。