BadgeBadge

A badge dinamikus információk, például számlálók vagy állapotjelzések megjelenítésére szolgál. Tartalmazhat szöveget vagy számokat.

Használat

A komponens importálása:

import 'mdui/components/badge.js';

A komponens TypeScript-típusának importálása:

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

Példa:

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

Példák

Változat

A variant attribútummal állíthatja be a badge alakját. Ha a variant értéke large, akkor egy nagy badge jelenik meg. Az alapértelmezett slotban megadhatja a megjelenítendő szöveget.

99+

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

Forrás

API

Tulajdonságok

Attribútum Tulajdonság Reflect Típus Alapértelmezett

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

Attribútum	Tulajdonság	Reflect	Típus	Alapértelmezett
`variant`	`variant`		`'small' \| 'large'`	`'large'`
A jelvény alakja. A lehetséges értékek: `small`: Kis méretű jelvény, szöveg megjelenítése nélkül `large`: Nagy méretű jelvény, megjeleníti a szöveget

A jelvény alakja. A lehetséges értékek:

small: Kis méretű jelvény, szöveg megjelenítése nélkül
large: Nagy méretű jelvény, megjeleníti a szöveget

Slots

Név
(alapértelmezett)
A jelvényben megjelenő szöveg.

CSS egyéni tulajdonságok

Név
`--shape-corner`
A komponens sarok lekerekítésének mérete. Megadható konkrét pixelérték; de ajánlott a design tokenek hivatkozása.

Előző fejezet

Avatar Avatar

Következő fejezet

BottomAppBar Alsó alkalmazássáv