DocsComposantsProgress
Progress
A progress bar from 0 to 100.
1 fichier
<pb-ui.progress :value="66" class="w-3/5" />Installation
pyblade-ui add progress- Copiez ce fichier dans votre projetcomponents/ui/progress.html
@props({'value': 0}) <div role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="{{ value }}" data-slot="progress" {{ attributes.cn("relative h-2 w-full overflow-hidden rounded-full bg-primary/20") }}> <div class="h-full w-full flex-1 bg-primary transition-all" style="transform: translateX(-{{ 100 - min(max(int(value), 0), 100) }}%)"></div> </div> - Adaptez le chemin à votre projet
Le dossier
componentsest celui déclaré danspyblade.toml.
Utilisation
La balise <pb-ui.progress> est disponible dans tous vos templates.
<pb-ui.progress :value="66" />Exemples
Plusieurs valeurs
<div class="grid w-3/5 gap-4">
<pb-ui.progress :value="15" />
<pb-ui.progress :value="50" />
<pb-ui.progress :value="90" />
</div>Props
| Prop | Défaut |
|---|---|
| value | 0 |
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.