cal.pub0.org/packages/ui/components/sheet/sheet.stories.mdx

58 lines
1.3 KiB
Markdown

import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
import {
Examples,
Example,
Note,
Title,
VariantsTable,
VariantColumn,
RowTitles,
CustomArgsTable,
} from "@calcom/storybook/components";
import {
Sheet,
SheetClose,
SheetContent,
SheetDescription,
SheetFooter,
SheetHeader,
SheetTitle,
SheetTrigger,
} from "./sheet";
import {Button} from "../button";
<Meta title="UI/Sheet" />
<Title title="Sheet" suffix="Brief" subtitle="Version 2.0 — Last Update: 21 June 2023" />
## Definition
A sheet is a container that can be used to display content on differnt sides of the current page.
## Structure
<Examples title="Spacing">
<Sheet>
<SheetTrigger asChild>
<Button>Open default sheet</Button>
</SheetTrigger>
<SheetContent position="right" size={"default"}>
<SheetHeader>
<SheetTitle>Edit profile</SheetTitle>
<SheetDescription>
Make changes to your profile here. Click save when you're done.
</SheetDescription>
</SheetHeader>
<SheetFooter>
<SheetClose asChild>
<Button type="submit">Save changes</Button>
</SheetClose>
</SheetFooter>
</SheetContent>
</Sheet>
</Examples>