Badge배지

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>

소스

API

속성

HTML 속성 JavaScript 프로퍼티 Reflect 유형 기본값

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

HTML 속성	JavaScript 프로퍼티	Reflect	유형	기본값
`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

이름
기본
A jelvényben megjelenő szöveg.

CSS 사용자 정의 속성

이름
`--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.

이전 장

Avatar 아바타

다음 장

BottomAppBar 하단 앱 바