Progress bar - Barre de progression

La barre de progression est un indicateur visuel linéaire qui informe de l’avancement d’un processus en cours.

Component checklist

Statut

-

Fonctionnel

Code source

Lien vers le repository (nous demander les droits)

Storybook

Dernière version publiée

Dernière version de modification

Package @ds-autonomie/web-components

2.20.0

Disponible depuis la version

Package @ds-autonomie/web-components

1.0.0

Usage


                                                                                                                                                        
                                                                                                                                                        
                                                                                                                                                            <dsa-progress-bar value="50" label="chargement de la page"></dsa-progress-bar>
                                                                                                                                                        <script type="text/typescript">
                                                                                                                                                          import '@ds-autonomie/web-components/dist/components/progress-bar/progress-bar.js';
                                                                                                                                                          import type { DSAProgressBar } from '@ds-autonomie/web-components'
                                                                                                                                                        </script>
                                                                                                                                                        
                                                                                                                                                            

Code HTML à implémenter pour utiliser le composant barre de progrès


                                                                                                                                                        
                                                                                                                                                        
                                                                                                                                                            import { Component } from '@angular/core';
                                                                                                                                                        import type { DSAProgressBar } from '@ds-autonomie/web-components'
                                                                                                                                                        import '@ds-autonomie/web-components/dist/components/progress-bar/progress-bar.js';
                                                                                                                                                        
                                                                                                                                                        @Component({
                                                                                                                                                          selector: 'app-root',
                                                                                                                                                          templateUrl: './app.component.html',
                                                                                                                                                          styleUrls: ['./app.component.css']
                                                                                                                                                        })
                                                                                                                                                        export class AppComponent {}
                                                                                                                                                        
                                                                                                                                                            

app.component.ts


                                                                                                                                                        
                                                                                                                                                        
                                                                                                                                                            <dsa-progress-bar value="50" label="chargement de la page"></dsa-progress-bar>
                                                                                                                                                        
                                                                                                                                                            

app.component.html


API

Attributs et propriétés

Propriété

attribut

Description

Type

Valeur par défaut

indeterminate

Quand défini à true, le pourcentage est ignoré, le label est masqué, et la progress bar est dessinée dans un état indéterminé

boolean

false

label

Un label personnalisé pour les appareils et accessoires fonctionnels

string

''

valeur

Le pourcentage de progrès actuel en pourcentage de 0 à 100

number

0

Méthodes

Slots

Événements