DocsComposantsAlert dialog

Alert dialog

A modal that asks for confirmation and cannot be dismissed by clicking outside.

Alpine.jsdépend de button7 fichiers

<pb-ui.alert-dialog name="confirm">
  <pb-slot:trigger><pb-ui.button variant="outline">Afficher le dialogue</pb-ui.button></pb-slot:trigger>
  <pb-ui.alert-dialog-header>
    <pb-ui.alert-dialog-title>Êtes-vous absolument sûr ?</pb-ui.alert-dialog-title>
    <pb-ui.alert-dialog-description>Cette action est irréversible. Votre compte sera supprimé de nos serveurs.</pb-ui.alert-dialog-description>
  </pb-ui.alert-dialog-header>
  <pb-ui.alert-dialog-footer>
    <pb-ui.alert-dialog-cancel><pb-ui.button variant="outline">Annuler</pb-ui.button></pb-ui.alert-dialog-cancel>
    <pb-ui.alert-dialog-action><pb-ui.button>Continuer</pb-ui.button></pb-ui.alert-dialog-action>
  </pb-ui.alert-dialog-footer>
</pb-ui.alert-dialog>

Installation

pyblade-ui add alert-dialog

Installez les dépendances
button et Alpine.js, chargé dans votre <head>.

Copiez ces fichiers dans votre projet

components/ui/alert_dialog.html

@props({'name': '', 'trigger': '', 'open': False})
<div data-slot="alert-dialog" x-data="{ open: {{ str(bool(open)).lower() }} }"
  x-on:keydown.escape.window="open = false"
  x-on:alert-dialog-open.window="$event.detail === '{{ name }}' && (open = true)"
  x-on:alert-dialog-close.window="$event.detail === '{{ name }}' && (open = false)"
  x-effect="document.body.classList.toggle('overflow-hidden', open)"
  class="contents">
  <span data-slot="alert-dialog-trigger" class="contents" x-on:click="open = true">{{ trigger }}</span>
  <div x-show="open" x-cloak class="fixed inset-0 z-50 flex items-center justify-center p-4">
    <div data-slot="alert-dialog-overlay" x-show="open" x-transition.opacity class="fixed inset-0 bg-black/50"></div>
    <div role="alertdialog" aria-modal="true" data-slot="alert-dialog-content" x-show="open"
      x-transition:enter="duration-200 ease-out" x-transition:enter-start="scale-95 opacity-0" x-transition:enter-end="scale-100 opacity-100"
      x-transition:leave="duration-150 ease-in" x-transition:leave-start="scale-100 opacity-100" x-transition:leave-end="scale-95 opacity-0"
      {{ attributes.cn("relative z-50 grid w-full max-w-[calc(100%-2rem)] gap-4 rounded-lg border bg-background p-6 shadow-lg sm:max-w-lg") }}>{{ slot }}</div>
  </div>
</div>

components/ui/alert_dialog_header.html

<div data-slot="alert-dialog-header" {{ attributes.cn("flex flex-col gap-2 text-center sm:text-left") }}>{{ slot }}</div>

components/ui/alert_dialog_footer.html

<div data-slot="alert-dialog-footer" {{ attributes.cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end") }}>{{ slot }}</div>

components/ui/alert_dialog_title.html

<h2 data-slot="alert-dialog-title" {{ attributes.cn("text-lg font-semibold") }}>{{ slot }}</h2>

components/ui/alert_dialog_description.html

<p data-slot="alert-dialog-description" {{ attributes.cn("text-sm text-muted-foreground") }}>{{ slot }}</p>

components/ui/alert_dialog_action.html

<span data-slot="alert-dialog-action" x-on:click="open = false" {{ attributes.cn("contents") }}>{{ slot }}</span>

components/ui/alert_dialog_cancel.html

<span data-slot="alert-dialog-cancel" x-on:click="open = false" {{ attributes.cn("contents") }}>{{ slot }}</span>

Adaptez le chemin à votre projet
Le dossier components est celui déclaré dans pyblade.toml.

Utilisation

Les balises <pb-ui.alert-dialog> <pb-ui.alert-dialog-header> <pb-ui.alert-dialog-footer> <pb-ui.alert-dialog-title> <pb-ui.alert-dialog-description> <pb-ui.alert-dialog-action> <pb-ui.alert-dialog-cancel> sont disponibles dans tous vos templates.

<pb-ui.alert-dialog name="delete">
  <pb-slot:trigger><pb-ui.button variant="outline">Delete</pb-ui.button></pb-slot:trigger>
  <pb-ui.alert-dialog-header>
    <pb-ui.alert-dialog-title>Are you absolutely sure?</pb-ui.alert-dialog-title>
    <pb-ui.alert-dialog-description>This cannot be undone.</pb-ui.alert-dialog-description>
  </pb-ui.alert-dialog-header>
  <pb-ui.alert-dialog-footer>
    <pb-ui.alert-dialog-cancel><pb-ui.button variant="outline">Cancel</pb-ui.button></pb-ui.alert-dialog-cancel>
    <pb-ui.alert-dialog-action><pb-ui.button>Continue</pb-ui.button></pb-ui.alert-dialog-action>
  </pb-ui.alert-dialog-footer>
</pb-ui.alert-dialog>

Props

Prop	Défaut
name	''
trigger	''
open	False

Tout autre attribut (class, id, x-on:click, hx-post…) est transmis à l'élément racine ; vos classes Tailwind l'emportent sur celles du composant.

‹ Dialog Sheet ›