Sheet

Extends the Dialog component to display content that complements the main content of the screen.

Usage

Import all parts and piece them together. It's mandatory to wrap the whole component with the Tailwind tag.

const { Tailwind } = VM.require("uiisnear.near/widget/tailwind");
 
const { 
  Sheet,
  SheetOverlay,
  SheetTrigger,
  SheetClose,
  SheetContent,
  SheetHeader,
  SheetFooter,
  SheetTitle,
  SheetDescription,
  SheetConf
} = VM.require("uiisnear.near/widget/sheet");
 
if (Tailwind == undefined) return "";

<Tailwind>
  <Sheet>
    <SheetTrigger>Open</SheetTrigger>
    <SheetContent>
      <SheetHeader>
        <SheetTitle>Are you absolutely sure?</SheetTitle>
        <SheetDescription>
          This action cannot be undone. This will permanently delete your account
          and remove your data from our servers.
        </SheetDescription>
      </SheetHeader>
    </SheetContent>
  </Sheet>
</Tailwind>

API Reference

Classnames

Classnames available to customize the component.

Function	Classname
SheetOverlay	sheetOverlayClassname
SheetHeader	sheetHeaderClassname
SheetFooter	sheetFooterClassname
SheetTitle	sheetTitleClassname
SheetDescription	sheetDescriptionClassname

Variants

Variants available and how to use them.

Attribute	Value
side	"top" \| "bottom" \| "left" \| "right"

Examples

Side

Use the side property to <SheetConf /> to indicate the edge of the screen where the component will appear. The values can be top, right, bottom or left.

Separator Skeleton