Ir al contenido
uiify

Framework

Next.jsTanStack StartAstroVike

Estilo

CSSTailwind

Tema

Idioma

English简体中文日本語العربيةРусскийEspañolPortuguês (Brasil)

Modal

Diálogo modal basado en el elemento dialog nativo.

Navegadores
Chrome 123+Firefox 121+Safari 17.5+
Nivel
0
Tamaño comprimido
944 B
Presupuesto de diseño forzado
0 ms
Presupuesto de axe
0
Compatible con SSR
Sí
Basado en
elements/dialog
Contrato publicado
Entorno de pruebas

Zona de pruebas

Modal

Cerrado

Controlado

Controlado

El estado del componente padre controla este modal después de la hidratación.

Cambios: 0, estado: cerrado

Ejemplos

Sizes

size writes data-size: sm 24rem, md (default) 28rem, lg 40rem, full fills the viewport. On a phone every size except full is a bottom sheet.

Small

24rem wide.

Large

40rem wide.

import { Modal } from "@gunkin/uiify";

export default function Example() {
  return (
    <>
      <Modal id="size-sm" size="sm" title="Small" trigger="Small">
        <p>24rem wide.</p>
      </Modal>
      <Modal id="size-lg" size="lg" title="Large" trigger="Large">
        <p>40rem wide.</p>
      </Modal>
    </>
  );
}

Long content

The title, content and footer share one scroll area. Compose the parts inside ModalBody for a document-style dialog.

Terms of service

The whole document scrolls together.

Clause 1: text that makes the document taller than the screen.

Clause 2: text that makes the document taller than the screen.

Clause 3: text that makes the document taller than the screen.

Clause 4: text that makes the document taller than the screen.

Clause 5: text that makes the document taller than the screen.

Clause 6: text that makes the document taller than the screen.

Clause 7: text that makes the document taller than the screen.

Clause 8: text that makes the document taller than the screen.

Clause 9: text that makes the document taller than the screen.

Clause 10: text that makes the document taller than the screen.

Clause 11: text that makes the document taller than the screen.

Clause 12: text that makes the document taller than the screen.

Clause 13: text that makes the document taller than the screen.

Clause 14: text that makes the document taller than the screen.

Clause 15: text that makes the document taller than the screen.

Clause 16: text that makes the document taller than the screen.

Clause 17: text that makes the document taller than the screen.

Clause 18: text that makes the document taller than the screen.

Clause 19: text that makes the document taller than the screen.

Clause 20: text that makes the document taller than the screen.

Clause 21: text that makes the document taller than the screen.

Clause 22: text that makes the document taller than the screen.

Clause 23: text that makes the document taller than the screen.

Clause 24: text that makes the document taller than the screen.

Clause 25: text that makes the document taller than the screen.

Clause 26: text that makes the document taller than the screen.

Clause 27: text that makes the document taller than the screen.

Clause 28: text that makes the document taller than the screen.

Clause 29: text that makes the document taller than the screen.

Clause 30: text that makes the document taller than the screen.

import { ModalTrigger, ModalContent, ModalBody, ModalHeader, ModalTitle, ModalClose, ModalFooter } from "@gunkin/uiify";
export default function Example() {
  return <>
    <ModalTrigger target="terms">Read terms</ModalTrigger>
    <ModalContent id="terms" aria-labelledby="terms-title">
      <ModalBody>
        <ModalHeader><ModalTitle id="terms-title">Terms of service</ModalTitle><ModalClose aria-label="Close" target="terms">×</ModalClose></ModalHeader>
        {Array.from({ length: 30 }, (_, index) => <p key={index}>Clause {index + 1}: text that makes the document taller than the screen.</p>)}
        <ModalFooter><ModalClose target="terms">Done</ModalClose></ModalFooter>
      </ModalBody>
    </ModalContent>
  </>;
}

Opening a modal from a modal

Render the child Modal inside the parent. It opens on top, Escape closes only the child, focus returns to the button that opened it, and the page is dimmed once.

Edit profile

Unsaved changes are lost when you close.

Discard changes?

This cannot be undone.

import { Modal, ModalClose } from "@gunkin/uiify";

export default function Example() {
  return (
    <Modal
      id="editor"
      trigger="Edit profile"
      title="Edit profile"
      description="Unsaved changes are lost when you close."
    >
      <Modal
        id="discard"
        trigger="Discard changes"
        title="Discard changes?"
        description="This cannot be undone."
        footer={<ModalClose target="discard">Keep editing</ModalClose>}
      />
    </Modal>
  );
}

API

Modal

ModalTrigger

PropTipoPredeterminadoDescripción
target*string—Id del ModalContent que abre este botón; el navegador lo resuelve al hacer clic, por lo que no se ejecuta JavaScript nuestro.
childrenReactNode—Contenido del botón activador.
asTAs & NativeButtonAs<TAs>"button"Componente que pasa props y ref a un botón nativo; se rechazan otras etiquetas porque los comandos invoker necesitan un botón real.

ModalContent

PropTipoPredeterminadoDescripción
id*string—Id único proporcionado por el consumidor, referenciado por el activador y el destino de cierre.
size"sm" | "md" | "lg" | "full""md"Tamaño de ancho (24, 28, 40rem). full llena el área visible. Se escribe en data-size; reemplaza --uiify-modal-inline-size para usar un ancho personalizado.
align"center" | "start""center"Posición vertical en tabletas y escritorio. En teléfonos se convierte en un panel inferior, salvo que size sea full.
dismiss"any" | "closerequest" | "none""any"closedby: any añade toques en el fondo, closerequest permite solo Escape y none, solo tus controles. Safari no tiene closedby, por lo que Escape siempre cierra; UIEnhance gestiona los toques en el fondo (any) y el deslizamiento del panel (distinto de none).
backdrop"opaque" | "blur" | "none""opaque"Tratamiento del fondo. Se escribe en data-backdrop.
childrenReactNode—Contenido del diálogo.

ModalClose

PropTipoPredeterminadoDescripción
target*string—Id del ModalContent que cierra este botón.
childrenReactNode—Contenido del botón de cierre.
asTAs & NativeButtonAs<TAs>"button"Componente que pasa props y ref a un botón nativo; se rechazan otras etiquetas porque los comandos invoker necesitan un botón real.

ModalHeader

PropTipoPredeterminadoDescripción
childrenReactNode—Fila superior fija que contiene el título, la descripción y el control de cierre.

ModalTitle

PropTipoPredeterminadoDescripción
childrenReactNode—Nombre accesible del diálogo; referencia su id desde aria-labelledby.

ModalDescription

PropTipoPredeterminadoDescripción
childrenReactNode—Texto de apoyo; referencia su id desde aria-describedby.

ModalBody

PropTipoPredeterminadoDescripción
childrenReactNode—Región desplazable entre el encabezado y el pie.

ModalFooter

PropTipoPredeterminadoDescripción
childrenReactNode—Fila de acciones fijada bajo el cuerpo.

ModalGrabber

PropTipoPredeterminadoDescripción
childrenReactNode—Tirador de arrastre decorativo del panel móvil; el deslizamiento comienza aquí.

ModalClientContent (@gunkin/uiify/components/modal/client)

PropTipoPredeterminadoDescripción
id*string—Id único proporcionado por el consumidor, referenciado por el activador y el cierre.
openboolean—Estado de apertura controlado, que determina el estado después de la hidratación.
defaultOpenboolean—Estado inicial no controlado, aplicado con showModal() después de la hidratación; el marcado del servidor permanece cerrado.
onOpenChange(open: boolean) => void—Se dispara una vez por cambio nativo o programático con el nuevo estado, incluida una vez al montar si el navegador lo abrió antes de la hidratación.
onOpenChangeComplete(open: boolean) => void—Se dispara una vez por transición de apertura o cierre al terminar sus transiciones CSS, o de inmediato si no hay ninguna, incluida la transición defaultOpen tras la hidratación; nunca si el diálogo no cambió.
size"sm" | "md" | "lg" | "full""md"Tamaño de ancho (24, 28, 40rem). full llena el área visible. Se escribe en data-size; reemplaza --uiify-modal-inline-size para usar un ancho personalizado.
align"center" | "start""center"Posición vertical en tabletas y escritorio. En teléfonos se convierte en un panel inferior, salvo que size sea full.
dismiss"any" | "closerequest" | "none""any"closedby: any añade toques en el fondo, closerequest permite solo Escape y none, solo tus controles. Safari no tiene closedby, por lo que Escape siempre cierra; UIEnhance gestiona los toques en el fondo (any) y el deslizamiento del panel (distinto de none).
backdrop"opaque" | "blur" | "none""opaque"Tratamiento del fondo. Se escribe en data-backdrop.
childrenReactNode—Contenido del diálogo.

Teclado

TeclaAcción
EscapeCerrar (solo el modal superior si hay anidación)
TabRecorrer el foco dentro del modal
Shift+TabInvertir el orden de tabulación

Accesibilidad

<dialog> nativo que abre un invoker command="show-modal" antes de ejecutar JavaScript. El navegador gestiona la modalidad, la contención del foco, Escape y la devolución del foco; el cierre usa request-close para que onCancel pueda impedirlo. El ícono de cierre del encabezado siempre está presente. En teléfonos, el modal es un panel inferior; deslizarlo hacia abajo y tocar el fondo son atajos, nunca la única salida.

Puntos de estilo

data-uiify-modaldata-part="trigger|content|header|title|description|body|footer|grabber|close"data-size="sm|lg|full"data-align="start"data-backdrop="blur|none"--uiify-trigger-open (inside [data-uiify-modal][data-part="root"])--uiify-modal-inline-size (dialog width)