Badge

I badge forniscono informazioni dinamiche, come conteggi o indicazioni di stato. Possono contenere etichette o numeri.

Utilizzo

Importa il componente:

import 'mdui/components/badge.js';

Importa il tipo TypeScript:

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

Esempio:

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

Usa l'attributo variant per controllare la forma del badge. Il valore large lo rende più grande. Il contenuto va inserito nello slot predefinito.

99+

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

Sorgente

Attributo HTML Proprietà JavaScript Reflect Tipo Predefinito

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

Attributo HTML	Proprietà JavaScript	Reflect	Tipo	Predefinito
`variant`	`variant`		`'small' \| 'large'`	`'large'`
Variante del badge. I valori opzionali includono: `small`: badge piccolo, non visualizza testo `large`: badge grande, visualizza il testo

Variante del badge. I valori opzionali includono:

Nome
(predefinito)
Testo visualizzato nel badge

Nome
`--shape-corner`
Dimensione dell'arrotondamento degli angoli del componente. È possibile specificare un valore in pixel, ma si consiglia di fare riferimento al Design Token.

Capitolo precedente

Avatar

Capitolo successivo

BottomAppBar