DocsComposantsCollapsible

Collapsible

A section that shows and hides its content.

Alpine.jsdépend de button3 fichiers

<pb-ui.collapsible class="flex w-[350px] flex-col gap-2">
  <div class="flex items-center justify-between gap-4 px-4">
    <h4 class="text-sm font-semibold">@ada a 3 dépôts favoris</h4>
    <pb-ui.collapsible-trigger>
      <pb-ui.button variant="ghost" size="icon" class="size-8" aria-label="Afficher">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
      </pb-ui.button>
    </pb-ui.collapsible-trigger>
  </div>
  <div class="rounded-md border px-4 py-2 font-mono text-sm">pyblade/pyblade</div>
  <pb-ui.collapsible-content class="flex flex-col gap-2">
    <div class="rounded-md border px-4 py-2 font-mono text-sm">pyblade/pyblade-ui</div>
    <div class="rounded-md border px-4 py-2 font-mono text-sm">alpinejs/alpine</div>
  </pb-ui.collapsible-content>
</pb-ui.collapsible>

Installation

pyblade-ui add collapsible

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

Copiez ces fichiers dans votre projet

components/ui/collapsible.html

@props({'open': False})
<div data-slot="collapsible" x-data="{ open: {{ str(bool(open)).lower() }} }" x-bind:data-state="open ? 'open' : 'closed'" {{ attributes.cn("") }}>{{ slot }}</div>

components/ui/collapsible_trigger.html

<span data-slot="collapsible-trigger" x-on:click="open = !open" {{ attributes.cn("contents") }}>{{ slot }}</span>

components/ui/collapsible_content.html

<div data-slot="collapsible-content" x-show="open" x-cloak x-transition.opacity {{ attributes.cn("") }}>{{ slot }}</div>

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

Utilisation

Les balises <pb-ui.collapsible> <pb-ui.collapsible-trigger> <pb-ui.collapsible-content> sont disponibles dans tous vos templates.

<pb-ui.collapsible>
  <pb-ui.collapsible-trigger><pb-ui.button variant="ghost">Toggle</pb-ui.button></pb-ui.collapsible-trigger>
  <pb-ui.collapsible-content>Hidden content</pb-ui.collapsible-content>
</pb-ui.collapsible>

Props

Prop	Défaut
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.

‹ Accordion Carousel ›