Progress ring - Roue de progression

La roue de progression est un indicateur visuel circulaire 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-ring value="25" label="chargement de la page"></dsa-progress-ring>
                                                                                                                                                        <script type="text/typescript">
                                                                                                                                                          import '@ds-autonomie/web-components/dist/components/progress-ring/progress-ring.js';
                                                                                                                                                          import type { DSAProgressRing } from '@ds-autonomie/web-components';
                                                                                                                                                        </script>
                                                                                                                                                        
                                                                                                                                                            

Code HTML à implémenter pour utiliser le composant roue de progression


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

app.component.ts


                                                                                                                                                        
                                                                                                                                                        
                                                                                                                                                            <dsa-progress-ring value="25" label="chargement de la page"></dsa-progress-ring>
                                                                                                                                                        
                                                                                                                                                            

app.component.html


API

Attributs et propriétés

Propriété

attribut

Description

Type

Valeur par défaut

label

Un label personalisé pour les appareils fonctionels

string

''

size

La taille de l'anneau de progression

small medium

medium

value

La progression actuelle en pourcentage, 0 à 100

number

0

Méthodes

Slots

Événements