Modal

Sin respuesta todavía.

Modal declarativo

Controla la visibilidad mediante una señal booleana y model. El ejemplo de arriba también permite probar un diálogo cuyo cierre exige una acción explícita.

meeko

<script lang="ts">
  const opened = signal(false)
</script>

<template>
  <UIButton on:click="() => (opened.value = true)">Abrir</UIButton>
  <UIModal title="Editar proyecto" model="opened" size="md">
    <p>Contenido del diálogo.</p>
    <snippet name="footer">
      <UIButton on:click="() => (opened.value = false)">Listo</UIButton>
    </snippet>
  </UIModal>
</template>

Abrir y esperar un resultado

Necesitas UIApp en la raíz. Los componentes del registro cuyo nombre empieza por Modal se pueden abrir con props tipadas. Un error de carga rechaza la promesa; descartar el diálogo resuelve undefined.

Dentro de un componente ts

const modal = useModal()

// Invoca esta función desde una acción del usuario.
async function confirm() {
  const accepted = await modal.open<boolean>('ModalConfirm', {
    message: '¿Quieres confirmar esta acción?',
  })
  // boolean | undefined: descartar devuelve undefined.
  return accepted
}

app/components/Modal/Confirm.meeko meeko

<!-- app/components/Modal/Confirm.meeko -->
<script lang="ts">
  const props = defineProps<{ message: string }>()

  const modal = useModalInstance<boolean>()
</script>

<template>
  <UIModal title="Confirmar" bind:description="props.message">
    <snippet name="footer">
      <UIButton variant="outline" on:click="() => modal.dismiss()">Cancelar</UIButton>
      <UIButton on:click="() => modal.close(true)">Confirmar</UIButton>
    </snippet>
  </UIModal>
</template>

Modales anidados

Abre la confirmación y luego otro modal para probar tamaños lg, md y sm. Sólo el superior controla el fondo y el foco. Los anteriores conservan su estado, quedan bloqueados y recuperan foco y tamaño al volver. El movimiento se reduce cuando el usuario lo solicita.

Propiedades
Nombre	Tipo / valor inicial	Descripción
`title`	`string`	Obligatoria. Nombre accesible del diálogo.
`description`	`string`	Descripción asociada mediante aria-describedby.
`model`	`Signal<boolean>` false	Control de apertura declarativa.
`size`	`sm \| md \| lg` md	Ancho máximo del diálogo.
`closeOnEscape / closeOnBackdrop`	`boolean` true	Permite descartar con Escape o el fondo.
`closeButton`	`boolean` true	Muestra el botón de cierre.
`closeLabel`	`string` Cerrar modal	Nombre accesible del botón. El valor por defecto sigue el idioma del documento (véase Temas).
`class`	`string`	Clases adicionales.

Requiere el snippet default y admite footer. El evento dismiss recibe escape, backdrop, button o native. No uses un modal para tareas que puedan resolverse dentro de la página.

Contenidos

Modal declarativo

Abrir y esperar un resultado

Modales anidados

¿Te sirvió esta página?