Sheet

A panel that slides in from an edge.

A panel that slides in from the edge of the screen — for a full set of filters, or an edit form that wants more room than a modal.

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";

The structure matches Dialog; only the direction differs.

PropType

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

Goes on `SheetContent`. Which edge it enters from.

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

Default"right"

SheetTitle is required for assistive technology. Keep it and add className="sr-only" if it shouldn’t be visible.