DocsComposantsButton group

Button group

Joins buttons into one control.

dépend de button1 fichier

<pb-ui.button-group>
  <pb-ui.button variant="outline">Archiver</pb-ui.button>
  <pb-ui.button variant="outline">Signaler</pb-ui.button>
  <pb-ui.button variant="outline">Supprimer</pb-ui.button>
</pb-ui.button-group>

Installation

pyblade-ui add button-group

Installez les dépendances
button.

Copiez ce fichier dans votre projet

components/ui/button_group.html

@props({'orientation': 'horizontal'})
<div role="group" data-slot="button-group" data-orientation="{{ orientation }}" {{ attributes.cn(
    "flex w-fit items-stretch [&>*]:focus-visible:relative [&>*]:focus-visible:z-10",
    {
        'horizontal': '[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none',
        'vertical': 'flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none',
    }[orientation],
) }}>{{ slot }}</div>

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

Utilisation

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

<pb-ui.button-group>
  <pb-ui.button variant="outline">Archive</pb-ui.button>
  <pb-ui.button variant="outline">Report</pb-ui.button>
</pb-ui.button-group>

Exemples

Vertical

<pb-ui.button-group orientation="vertical">
  <pb-ui.button variant="outline" size="sm">Haut</pb-ui.button>
  <pb-ui.button variant="outline" size="sm">Milieu</pb-ui.button>
  <pb-ui.button variant="outline" size="sm">Bas</pb-ui.button>
</pb-ui.button-group>

Avec un champ

Props

Prop	Défaut
orientation	'horizontal'

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.

‹ Button link Toggle ›