Badge

Rozet, sayı veya durum göstergeleri gibi dinamik bilgileri görüntülemek için kullanılır. Metin veya sayı içerebilir.

Kullanım Şekli

Bileşeni ihtiyacınıza göre içe aktarın:

import 'mdui/components/badge.js';

Bileşenin TypeScript türünü ihtiyacınıza göre içe aktarın:

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

Kullanım örneği:

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

Örnekler

Şekil

Rozetin şeklini ayarlamak için variant özniteliğini kullanın. variant large olduğunda, büyük bir rozet görüntülenecektir. Görüntülenecek metni varsayılan slot'ta belirtebilirsiniz.

99+

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

Sorgente

API

Proprietà

Attributo HTML Proprietà JavaScript Reflect Tipo Predefinito

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

Attributo HTML	Proprietà JavaScript	Reflect	Tipo	Predefinito
`variant`	`variant`		`'small' \| 'large'`	`'large'`
Rozetin şekli. Olası değerler: `small`: Küçük rozet, metin içermez `large`: Büyük rozet, metin içerir

Rozetin şekli. Olası değerler:

small: Küçük rozet, metin içermez
large: Büyük rozet, metin içerir

Slots

Nome
(predefinito)
Rozette görüntülenen metin.

CSS Custom Property

Nome
`--shape-corner`
Bileşenin köşe yuvarlaklık boyutu. Belirli bir piksel değeri belirtilebilir; ancak Design Tokens'a başvurmanız önerilir.

Capitolo precedente

Avatar

Capitolo successivo

BottomAppBar