Dialog

Una confirmación de acción destructiva que demuestra la composición completa de Dialog.

Paquete: @solidiom/dialog
Versión: 0.0.1-next.0
Estado: stable

Ejemplos

El ejemplo en vivo usa una acción de confirmación porque necesita un título claro, una explicación de la consecuencia y una forma explícita de cerrarlo. Presiona Escape, selecciona Cancelar o selecciona Eliminar espacio de trabajo para cerrarlo. No se modifica ningún dato.

El activador recupera el foco tras el cierre. El aspecto visual hereda los tokens semánticos claros y oscuros del sitio, en lugar de incluir valores de tema en el ejemplo.

Ver código fuente

        export function DialogExample(props: DialogExampleProps) {
  const copy = () => COPY[props.locale]

  return (
    <div
      ref={(element) => element.setAttribute("data-hydrated", "true")}
      class="dialog-example"
      data-dialog-example
    >
      <Dialog.Root>
        <Dialog.Trigger>
          <span class="dialog-example__trigger">{copy().trigger}</span>
        </Dialog.Trigger>
        <Dialog.Portal>
          <Dialog.Backdrop class="dialog-example__backdrop" />
          <Dialog.Content class="dialog-example__content">
            <Dialog.Title class="dialog-example__title">{copy().title}</Dialog.Title>
            <Dialog.Description class="dialog-example__description">
              {copy().description}
            </Dialog.Description>
            <div class="dialog-example__actions">
              <Dialog.Close>
                <span class="dialog-example__button dialog-example__button--secondary">
                  {copy().cancel}
                </span>
              </Dialog.Close>
              <Dialog.Close>
                <span class="dialog-example__button dialog-example__button--danger">
                  {copy().confirm}
                </span>
              </Dialog.Close>
            </div>
          </Dialog.Content>
        </Dialog.Portal>
      </Dialog.Root>
    </div>
  )
}