Badge

Indicateur visuel pour les valeurs numériques telles que les notifications et les scores.

Component checklist

Statut

Fonctionnel

Code source

Storybook

Dernière version de modification

2.16.0

Disponible depuis la version

1.0.0

Usage

Ce composant peut être utilisé de manière indépendante, ou être utilisé à l'intérieur des composants dsa-button et dsa-icon-button.


                                                                                                                                                        
                                                                                                                                                        
                                                                                                                                                            <dsa-badge>Badge</dsa-badge>
                                                                                                                                                        <script type="text/typescript">
                                                                                                                                                          import '@ds-autonomie/web-components/dist/components/badge/badge.js';
                                                                                                                                                         import type { DSABadge } from '@ds-autonomie/web-components';
                                                                                                                                                        </script>
                                                                                                                                                        
                                                                                                                                                            

Code HTML à implémenter pour utiliser le composant badge

 


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

app.component.ts


                                                                                                                                                        
                                                                                                                                                        
                                                                                                                                                            <dsa-badge>Badge</dsa-badge>
                                                                                                                                                        <script type="text/typescript">
                                                                                                                                                          import '@ds-autonomie/web-components/dist/components/badge/badge.js';
                                                                                                                                                         import type { DSABadge } from '@ds-autonomie/web-components';
                                                                                                                                                        </script>
                                                                                                                                                        
                                                                                                                                                            

app.component.html


API

Attributs et propriétés

Propriété

attribut

Description

Type

Valeur par défaut

pulse

Fait vibrer le badge pour attirer l’attention

boolean

false

size

Taille du badge

medium small

medium

variant

Variante de thème du badge

primary success neutral warning danger

primary

Méthodes

Slots

Nom

Description

(défaut)

Le contenu principal

Événements