Skip to content
Overlays

Drawer

server48.5 kB
@stellaria/nebula-webDrawerProps

Preview

Props

21
PropTypeDefault

aria-label

string

—

blurred

boolean

—

bodyClassName

string

—

children

El cuerpo, dentro del panel que dibuja el propio modal. Sobra cuando se pasa `content`.

ReactNode

—

className

string

—

closeLabel

string

—

closeOnClickOutside

boolean

—

closeOnEscape

boolean

—

content

El panel entero, traido por el consumidor. Con esto el modal **no dibuja panel**: se queda con lo que nadie quiere reescribir —el `<dialog>` nativo, el foco atrapado, el bloqueo del scroll, el velo desenfocado, la entrada y la salida animadas y el cierre por fuera— y suelta su superficie, su cabecera, su cuerpo y su pie. Lo que se pase ocupa ese sitio tal cual, sin envoltorio. Es para cuando la ventana ya tiene una forma propia en el producto —una `Card` con su anillo de degradado, por ejemplo— y meterla dentro del panel del modal dejaria una superficie sobre otra. Manda sobre `children`, `title`, `subtitle`, `footer`, `padding` y `withCloseButton`: con panel propio, esas piezas las pone quien lo trae. **Y el nombre accesible tambien**: sin `title` no hay de donde sacarlo, asi que pasa a hacer falta un `aria-label`.

ReactNode

—

footer

ReactNode

—

fullScreen

boolean

—

initialFocus

Where focus lands when the modal opens (ADR-203). `"dialog"` focuses the `<dialog>` itself (`tabIndex -1`, the `useDialog` contract): the reader announces the title and Tab goes to the first control, with no focus ring on the close button. `"first"` keeps the native behaviour of `showModal()`, the first focusable inside — what a search box wants. A ref focuses that element, typically the first field of a form.

ModalInitialFocus"dialog"

onClose

required
() => void

—

opened

required
boolean

—

padding

"sm" | "md" | "lg" | "none"

—

radius

"sm" | "md" | "lg" | "none""none"

side

ModalSide"end"

size

Unit"22rem"

subtitle

ReactNode

—

title

ReactNode

—

withCloseButton

boolean

—

Slot props

6

Each one spreads over an inner element, so you can restyle a region without forking the component.

PropTypeDefault

bodyProps

The body. Its padding is governed by `padding`; the slot composes with it, it does not override it.

BoxSlotProps

—

footerProps

The footer, when there is a `footer`.

BoxSlotProps

—

headerProps

The header row: heading on the left, close button on the right.

BoxSlotProps

—

headingProps

Title and subtitle column, inside the header.

BoxSlotProps

—

subtitleProps

The subtitle, when there is one.

TextSlotProps

—

titleProps

The title. It spreads AFTER the aria props, so the consumer wins.

TextSlotProps

—

Also accepts

On top of its own props, this component forwards these groups.

Style props · 127