BadgeRozet

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>

Kaynak Kodu

API

Özellikler

Öznitelik Özellik Reflect Tür Varsayılan

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

Öznitelik	Özellik	Reflect	Tür	Varsayılan
`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

Ad
Varsayılan
Rozette görüntülenen metin.

CSS Custom Property

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

Önceki Bölüm

Avatar Avatar

Sonraki Bölüm

BottomAppBar Alt Uygulama Çubuğu