BadgeBadge

Badge wyświetla dynamiczne informacje, takie jak liczniki lub wskaźniki stanu. Może zawierać tekst lub liczby.

Sposób użycia

Zaimportuj komponent:

import 'mdui/components/badge.js';

Zaimportuj typ TypeScript komponentu:

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

Przykład użycia:

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

Przykłady

Kształt

Atrybut variant ustawia kształt badge. Gdy variant ma wartość large, wyświetlany jest duży badge. Możesz określić tekst do wyświetlenia w domyślnym slocie.

99+

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

Źródło

API

Właściwości

Atrybut HTML Właściwość JavaScript Reflect Typ Domyślne

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

Atrybut HTML	Właściwość JavaScript	Reflect	Typ	Domyślne
`variant`	`variant`		`'small' \| 'large'`	`'large'`
Kształt Badge. Dozwolone wartości: `small`: Mała plakietka, bez tekstu `large`: Duża plakietka, z tekstem

Kształt Badge. Dozwolone wartości:

small: Mała plakietka, bez tekstu
large: Duża plakietka, z tekstem

Slots

Nazwa
(domyślny)
Tekst wyświetlany na plakietce

Właściwości niestandardowe CSS

Nazwa
`--shape-corner`
Wielkość zaokrąglenia rogów komponentu. Można określić konkretną wartość w pikselach; ale zaleca się odwołanie do tokenów projektowych

Poprzedni rozdział

Avatar Awatar

Następny rozdział

BottomAppBar Dolny pasek aplikacji