DocsComposantsPopover

Popover

Rich content in a floating panel, opened by its trigger.

Alpine.jsdépend de button1 fichier

<pb-ui.popover>
  <pb-slot:trigger><pb-ui.button variant="outline">Dimensions</pb-ui.button></pb-slot:trigger>
  <div class="grid gap-4">
    <div class="space-y-1">
      <h4 class="leading-none font-medium">Dimensions</h4>
      <p class="text-sm text-muted-foreground">Définissez la taille du calque.</p>
    </div>
    <div class="grid grid-cols-3 items-center gap-4"><pb-ui.label for="w">Largeur</pb-ui.label><pb-ui.input id="w" value="100%" class="col-span-2 h-8" /></div>
    <div class="grid grid-cols-3 items-center gap-4"><pb-ui.label for="h">Hauteur</pb-ui.label><pb-ui.input id="h" value="25px" class="col-span-2 h-8" /></div>
  </div>
</pb-ui.popover>

Installation

pyblade-ui add popover

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

Copiez ce fichier dans votre projet

components/ui/popover.html

@props({'trigger': '', 'align': 'center', 'side': 'bottom'})
<div data-slot="popover" x-data="{ open: false }" x-on:keydown.escape="open = false" class="relative inline-block">
  <span data-slot="popover-trigger" class="contents" x-on:click="open = !open">{{ trigger }}</span>
  <div data-slot="popover-content" x-show="open" x-cloak x-on:click.outside="open = false"
    x-transition:enter="duration-100 ease-out" x-transition:enter-start="scale-95 opacity-0" x-transition:enter-end="scale-100 opacity-100"
    {{ attributes.cn(
      "absolute z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden",
      {'bottom': 'top-full mt-2', 'top': 'bottom-full mb-2'}[side],
      {'start': 'left-0', 'center': 'left-1/2 -translate-x-1/2', 'end': 'right-0'}[align],
    ) }}>{{ slot }}</div>
</div>

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

Utilisation

La balise <pb-ui.popover> est disponible dans tous vos templates.

<pb-ui.popover align="start">
  <pb-slot:trigger><pb-ui.button variant="outline">Open</pb-ui.button></pb-slot:trigger>
  <p class="text-sm">Place any content here.</p>
</pb-ui.popover>

Props

Prop	Défaut
trigger	''
align	'center'
side	'bottom'

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.

‹ Drawer Hover card ›