Badge 徽标

Badges provide dynamic information, such as counts or status indications. They can contain labels or numbers.

Usage

Import the component:

import 'mdui/components/badge.js';

Import the TypeScript type:

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

example:

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

The variant attribute determines the badge's shape. A large value creates a larger badge. Specify the content to display within the default slot.

99+

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

源码

HTML 属性 JavaScript 属性 Reflect 类型默认值

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

HTML 属性	JavaScript 属性	Reflect	类型	默认值
`variant`	`variant`		`'small' \| 'large'`	`'large'`
Defines the badge shape. Possible values: `small`: A small badge without text. `large`: A large badge with displayed text.

Defines the badge shape. Possible values:

名称
默认
The text to be displayed.

名称
`--shape-corner`
The size of the component corner. You can use a specific pixel value, but it's recommended to reference design tokens.

Avatar 头像

BottomAppBar 底部应用栏