Badge

Le composant Badge permet d'afficher des informations dynamiques, telles que des compteurs ou des indicateurs d'état. Il peut contenir du texte ou des nombres.

Utilisation

Importez le composant :

import 'mdui/components/badge.js';

Importez le type TypeScript correspondant :

import type { Badge } from 'mdui/components/badge.js';

Exemple d'utilisation :

<mdui-badge>12</mdui-badge>

Exemples

Variante

Utilisez l'attribut variant pour choisir la variante du badge. Avec la valeur large, un grand badge est affiché. Le texte est à renseigner dans le slot par défaut.

99+

<mdui-badge variant="small"></mdui-badge>
<mdui-badge variant="large">99+</mdui-badge>

Source

API

Propriétés

Attribut HTML Propriété JavaScript Reflect Type Défaut

variant variant 'small' | 'large' 'large'

Attribut HTML	Propriété JavaScript	Reflect	Type	Défaut
`variant`	`variant`		`'small' \| 'large'`	`'large'`
Forme du badge. Les valeurs possibles incluent : `small` : Petit badge, n'affiche pas de texte `large` : Grand badge, affiche du texte

Forme du badge. Les valeurs possibles incluent :

small : Petit badge, n'affiche pas de texte
large : Grand badge, affiche du texte

Slots

Nom
Défaut
Texte affiché dans le badge

Propriétés CSS personnalisées

Nom
`--shape-corner`
Taille des coins arrondis du composant. Vous pouvez spécifier une valeur de pixel spécifique ; mais il est préférable de se référer au Design Tokens.

Chapitre précédent

Avatar

Chapitre suivant

BottomAppBar