Sheet

Um painel lateral (ou inferior/superior) deslizante para exibir conteúdo complementar sem sair da página.

Utilização

index.tsx
import {
  Sheet,
  SheetTrigger,
  SheetContent,
  SheetHeader,
  SheetFooter,
  SheetTitle,
  SheetDescription,
  SheetClose,
} from "@convertcompany/ui";

Exemplos

Customizando o lado

Você pode customizar o lado de onde o painel aparece, usando a prop side no componente SheetContent. Os valores aceitos são: left, right, top e bottom.

Props

Esse componente extende a implementação do Dialog Radix UI, e por isso, possui as mesmas propriedades. Para mais detalhes, consulte a documentação oficial.

Sheet

PropriedadeTipo
openControla se o sheet está aberto.
boolean
onOpenChangeCallback ao mudar estado do sheet.
(open: boolean) => void

SheetTrigger

PropriedadeTipo
asChildPermite usar um elemento customizado como gatilho.
boolean

SheetContent

PropriedadeTipo
sideDefine o lado de onde o painel aparecerá.
left
right
top
bottom
classNameClasse CSS adicional.
string

SheetTitle e SheetDescription

PropriedadeTipo
classNameClasse CSS adicional.
string

SheetFooter e SheetHeader

PropriedadeTipo
classNameClasse CSS adicional.
string

SheetClose

PropriedadeTipo
asChildPermite usar um botão customizado para fechar.
boolean