DocsComposantsTabs

Tabs

Panels shown one at a time.

Alpine.js4 fichiers

<pb-ui.tabs value="account" class="w-full max-w-sm">
  <pb-ui.tabs-list>
    <pb-ui.tabs-trigger value="account">Compte</pb-ui.tabs-trigger>
    <pb-ui.tabs-trigger value="password">Mot de passe</pb-ui.tabs-trigger>
  </pb-ui.tabs-list>
  <pb-ui.tabs-content value="account">
    <div class="rounded-xl border p-6 text-sm">
      <h3 class="font-semibold">Compte</h3>
      <p class="mt-1 text-muted-foreground">Modifiez votre profil ici.</p>
    </div>
  </pb-ui.tabs-content>
  <pb-ui.tabs-content value="password">
    <div class="rounded-xl border p-6 text-sm">
      <h3 class="font-semibold">Mot de passe</h3>
      <p class="mt-1 text-muted-foreground">Choisissez un nouveau mot de passe.</p>
    </div>
  </pb-ui.tabs-content>
</pb-ui.tabs>

Installation

pyblade-ui add tabs

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

Copiez ces fichiers dans votre projet

components/ui/tabs.html

@props({'value': ''})
<div data-slot="tabs" x-data="{ tab: '{{ value }}' }" {{ attributes.cn("flex flex-col gap-2") }}>{{ slot }}</div>

components/ui/tabs_list.html

<div role="tablist" data-slot="tabs-list" {{ attributes.cn("inline-flex h-9 w-fit items-center justify-center rounded-lg bg-muted p-[3px] text-muted-foreground") }}>{{ slot }}</div>

components/ui/tabs_trigger.html

@props({'value': ''})
<button type="button" role="tab" data-slot="tabs-trigger"
  x-on:click="tab = '{{ value }}'"
  x-bind:aria-selected="tab === '{{ value }}'"
  x-bind:data-state="tab === '{{ value }}' ? 'active' : 'inactive'"
  {{ attributes.cn(
    "inline-flex h-[calc(100%-1px)] flex-1 cursor-pointer items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 dark:text-muted-foreground",
    "data-[state=active]:bg-background data-[state=active]:shadow-sm dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground",
  ) }}>{{ slot }}</button>

components/ui/tabs_content.html

@props({'value': ''})
<div role="tabpanel" data-slot="tabs-content" x-show="tab === '{{ value }}'" x-cloak {{ attributes.cn("flex-1 outline-none") }}>{{ slot }}</div>

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

Utilisation

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

<pb-ui.tabs value="account">
  <pb-ui.tabs-list>
    <pb-ui.tabs-trigger value="account">Account</pb-ui.tabs-trigger>
    <pb-ui.tabs-trigger value="password">Password</pb-ui.tabs-trigger>
  </pb-ui.tabs-list>
  <pb-ui.tabs-content value="account">...</pb-ui.tabs-content>
  <pb-ui.tabs-content value="password">...</pb-ui.tabs-content>
</pb-ui.tabs>

Props

<pb-ui.tabs>

Prop	Défaut
value	''

<pb-ui.tabs-trigger>

Prop	Défaut
value	''

<pb-ui.tabs-content>

Prop	Défaut
value	''

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.

‹ Pagination Accordion ›