DocsComposantsAccordion

Accordion

Sections that expand one at a time.

Alpine.js2 fichiers

<pb-ui.accordion value="q1" class="w-full max-w-md">
  <pb-ui.accordion-item value="q1" title="Est-ce accessible ?">Oui. Les composants suivent les recommandations WAI-ARIA.</pb-ui.accordion-item>
  <pb-ui.accordion-item value="q2" title="Est-ce stylé ?">Oui. Avec Tailwind CSS v4 et des variables de thème.</pb-ui.accordion-item>
  <pb-ui.accordion-item value="q3" title="Est-ce animé ?">Oui, avec les transitions d'Alpine.js.</pb-ui.accordion-item>
</pb-ui.accordion>

Installation

pyblade-ui add accordion

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

Copiez ces fichiers dans votre projet

components/ui/accordion.html

@props({'value': ''})
<div data-slot="accordion" x-data="{ open: '{{ value }}' }" {{ attributes.cn("w-full") }}>{{ slot }}</div>

components/ui/accordion_item.html

@props({'value': '', 'title': ''})
<div data-slot="accordion-item" x-bind:data-state="open === '{{ value }}' ? 'open' : 'closed'" {{ attributes.cn("border-b last:border-b-0") }}>
  <h3 class="flex">
    <button type="button" x-on:click="open = (open === '{{ value }}' ? '' : '{{ value }}')" x-bind:aria-expanded="open === '{{ value }}'"
      class="flex flex-1 cursor-pointer items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50">
      {{ title }}
      <svg x-bind:class="open === '{{ value }}' ? 'rotate-180' : ''" class="pointer-events-none size-4 shrink-0 translate-y-0.5 text-muted-foreground transition-transform duration-200" 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" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg>
    </button>
  </h3>
  <div x-show="open === '{{ value }}'" x-cloak x-transition.opacity class="overflow-hidden pb-4 text-sm">{{ slot }}</div>
</div>

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

Utilisation

Les balises <pb-ui.accordion> <pb-ui.accordion-item> sont disponibles dans tous vos templates.

<pb-ui.accordion value="q1">
  <pb-ui.accordion-item value="q1" title="Is it accessible?">Yes.</pb-ui.accordion-item>
</pb-ui.accordion>

Props

<pb-ui.accordion>

Prop	Défaut
value	''

<pb-ui.accordion-item>

Prop	Défaut
value	''
title	''

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.

‹ Tabs Collapsible ›