DocsComposantsContext menu
Context menu
A menu opened with a right click on its area.
Alpine.jsdépend de dropdown-menu1 fichier
<pb-ui.context-menu>
<pb-slot:trigger><div class="grid h-40 w-72 place-items-center rounded-md border border-dashed text-sm text-muted-foreground">Clic droit ici</div></pb-slot:trigger>
<pb-ui.dropdown-menu-item>Précédent</pb-ui.dropdown-menu-item>
<pb-ui.dropdown-menu-item>Suivant</pb-ui.dropdown-menu-item>
<pb-ui.dropdown-menu-item>Recharger</pb-ui.dropdown-menu-item>
<pb-ui.dropdown-menu-separator />
<pb-ui.dropdown-menu-label>Outils</pb-ui.dropdown-menu-label>
<pb-ui.dropdown-menu-item>Enregistrer la page…</pb-ui.dropdown-menu-item>
<pb-ui.dropdown-menu-item variant="destructive">Supprimer</pb-ui.dropdown-menu-item>
</pb-ui.context-menu>Installation
pyblade-ui add context-menu- Installez les dépendances
dropdown-menu et Alpine.js, chargé dans votre
<head>. - Copiez ce fichier dans votre projetcomponents/ui/context_menu.html
@props({'trigger': ''}) <div data-slot="context-menu" x-data="{ open: false, x: 0, y: 0 }" x-on:contextmenu.prevent="open = true; x = Math.min($event.clientX, window.innerWidth - 224); y = Math.min($event.clientY, window.innerHeight - 40)" x-on:keydown.escape.window="open = false" x-on:scroll.window="open = false" class="contents"> <div data-slot="context-menu-trigger" class="contents">{{ trigger }}</div> <div role="menu" data-slot="context-menu-content" x-show="open" x-cloak x-on:click.outside="open = false" x-on:click="open = false" x-bind:style="{ left: x + 'px', top: y + 'px' }" 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("fixed z-50 min-w-[12rem] origin-top-left overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md") }}>{{ slot }}</div> </div> - Adaptez le chemin à votre projet
Le dossier
componentsest celui déclaré danspyblade.toml.
Utilisation
La balise <pb-ui.context-menu> est disponible dans tous vos templates.
<pb-ui.context-menu>
<pb-slot:trigger><div class="grid h-36 place-items-center rounded-md border border-dashed">Right click here</div></pb-slot:trigger>
<pb-ui.dropdown-menu-item>Back</pb-ui.dropdown-menu-item>
<pb-ui.dropdown-menu-item>Reload</pb-ui.dropdown-menu-item>
</pb-ui.context-menu>Props
| Prop | Défaut |
|---|---|
| trigger | '' |
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.