Sheet

Playground

Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.

Sheet

height

tone

Cada célula é o componente real, marcada com a variante do Figma que reproduz (passe o mouse pra ver o node).

Tone	Sheet
Default	Pausar a proteção? A Marlene fica sem avisos até você retomar. Nada é apagado. Dá pra retomar quando quiser em Família, no cartão da Marlene.
Destructive	Encerrar a proteção? Os avisos da Marlene param hoje e a conexão é desfeita. Dá pra retomar quando quiser em Família, no cartão da Marlene.

Tone	Sheet
Default	Pausar a proteção? A Marlene fica sem avisos até você retomar. Nada é apagado. Dá pra retomar quando quiser em Família, no cartão da Marlene.
Destructive	Encerrar a proteção? Os avisos da Marlene param hoje e a conexão é desfeita. Dá pra retomar quando quiser em Família, no cartão da Marlene.

As props que o arquivo do DS declara. O componente também repassa as do primitivo (base-ui), quando ele tem um.

SheetContentProps

Prop	Tipo	Padrão	Descrição
height?	"auto" \| "full" \| null	"auto"
tone?	OverlayTone	"default"
scrim?	ScrimTone	"soft"
grabber?	boolean	true	Show the drag handle on top (default on).
className?	string	—
style?	React.CSSProperties \| ((state: DrawerPopupState) => React.CSSProperties \| undefined)	—	Style applied to the element, or a function that returns a style object based on the component's state.
children?	React.ReactNode	—

SheetPreviewProps

Prop	Tipo	Padrão
height?	"auto" \| "full" \| null	"auto"
tone?	OverlayTone	"default"
grabber?	boolean	true
className?	string	—
children?	React.ReactNode	—