Separator

A horizontal or vertical divider.

1 fichier

<div class="w-full max-w-sm">
  <div class="space-y-1">
    <h4 class="text-sm font-medium leading-none">PyBlade UI</h4>
    <p class="text-sm text-muted-foreground">Des composants à copier dans votre projet.</p>
  </div>
  <pb-ui.separator class="my-4" />
  <div class="flex h-5 items-center gap-4 text-sm">
    <div>Docs</div>
    <pb-ui.separator orientation="vertical" />
    <div>Composants</div>
    <pb-ui.separator orientation="vertical" />
    <div>Thèmes</div>
  </div>
</div>

Installation

pyblade-ui add separator

Copiez ce fichier dans votre projet

components/ui/separator.html

@props({'orientation': 'horizontal'})
<div role="separator" aria-orientation="{{ orientation }}" data-slot="separator" {{ attributes.cn(
    "shrink-0 bg-border",
    {'horizontal': 'h-px w-full', 'vertical': 'h-full w-px self-stretch'}[orientation],
) }}></div>

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

Utilisation

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

<pb-ui.separator orientation="vertical" />

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.

‹ Spinner Skeleton ›