Progress bar - Barre de progression

Indicateur permettant de fournir un retour d'information sur un processus en cours initié par l'utilisateur.

Component checklist

Statut

Fonctionnel

Code source

Storybook

Dernière version de modification

2.20.0

Disponible depuis la version

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