Skip to content
Overlays

Modal

client48.5 kB
@stellaria/nebula-webModalProps

Preview

Props

22
PropTypeDefault

aria-label

string

—

blurred

booleanfalse

bodyClassName

string

—

centered

booleantrue

children

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

ReactNode

—

className

string

—

closeLabel

string"Close"

closeOnClickOutside

booleantrue

closeOnEscape

booleantrue

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

—

drawer

boolean | ModalSide

—

footer

ReactNode

—

fullScreen

booleanfalse

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""lg"

radius

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

—

size

SizeValue"md"

subtitle

ReactNode

—

title

ReactNode

—

withCloseButton

booleantrue

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