BadgeБейдж

Бейдж используется для отображения динамической информации, например, счётчиков или индикаторов состояния. Он может содержать текст или числа.

Использование

При необходимости импортируйте компонент:

import 'mdui/components/badge.js';

При необходимости импортируйте типы TypeScript:

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

Пример использования:

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

Примеры

Варианты

Используйте атрибут variant для выбора варианта бейджа. При значении large отображается большой бейдж. Вы можете указать отображаемый текст в слоте по умолчанию.

99+

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

Исходный код

API

Свойства

Атрибут Свойство Reflect Тип По умолчанию

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

Атрибут	Свойство	Reflect	Тип	По умолчанию
`variant`	`variant`		`'small' \| 'large'`	`'large'`
Форма бейджа. Возможные значения: `small` — маленький бейдж, текст не отображается `large` — большой бейдж, текст отображается

Форма бейджа. Возможные значения:

small — маленький бейдж, текст не отображается
large — большой бейдж, текст отображается

Slots

Название
(по умолчанию)
Текст, отображаемый в бейдже.

Пользовательские CSS-свойства

Название
`--shape-corner`
Размер скругления углов компонента. Можно указать конкретное значение в пикселях, но рекомендуется использовать дизайн-токены.

Предыдущая глава

Avatar Аватар

Следующая глава

BottomAppBar Нижняя панель приложения