BadgeBadge

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

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

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

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>

Fuente

API

Propiedades

Atributo Propiedad Reflect Tipo Predeterminado

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

Atributo	Propiedad	Reflect	Tipo	Predeterminado
`variant`	`variant`		`'small' \| 'large'`	`'large'`
Форма бейджа. Возможные значения: `small` — маленький бейдж, текст не отображается `large` — большой бейдж, текст отображается

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

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

Slots

Nombre
(predeterminado)
Текст, отображаемый в бейдже.

CSS Custom Properties

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

Capítulo anterior

Avatar Avatar

Capítulo siguiente

BottomAppBar Bottom App Bar