Badge

Badges zeigen dynamische Informationen an, etwa Zählungen oder Statusanzeigen. Sie können Text oder Zahlen enthalten.

Verwendung

Importieren Sie die Komponente nach Bedarf:

import 'mdui/components/badge.js';

Importieren Sie den TypeScript-Typ der Komponente nach Bedarf:

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

Beispiel:

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

Beispiele

Form

Mit dem Attribut variant legen Sie die Form des Badges fest. Setzen Sie variant auf large, wenn das Badge groß sein soll. Der Text steht im default Slot.

99+

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

Quellcode

API

Eigenschaften

Attribut Property Reflect Typ Standard

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

Attribut	Property	Reflect	Typ	Standard
`variant`	`variant`		`'small' \| 'large'`	`'large'`
Definiert die Badge-Größe. Mögliche Werte: `small`: Ein kleines Badge ohne Text. `large`: Ein großes Badge mit Text.

Definiert die Badge-Größe. Mögliche Werte:

small: Ein kleines Badge ohne Text.
large: Ein großes Badge mit Text.

Slots

Name
Standard
Der anzuzeigende Text.

CSS Custom Property

Name
`--shape-corner`
Der Eckradius der Komponente. Sie können einen bestimmten Pixelwert verwenden, es wird jedoch empfohlen, auf Design-Tokens zu verweisen.

Vorherige Seite

Avatar

Nächste Seite

BottomAppBar