BadgeOdznak

Odznak se používá k zobrazení dynamických informací, jako je počet nebo stavová indikace. Může obsahovat text nebo čísla.

Způsob použití

Importujte komponentu podle potřeby:

import 'mdui/components/badge.js';

Importujte TypeScript typy komponenty podle potřeby:

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

Příklad použití:

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

Příklady

Tvar

Použijte atribut variant k nastavení tvaru odznaku. Když je variant nastaven na large, zobrazí se velký odznak. Můžete zadat text, který se má zobrazit, ve výchozím slotu.

99+

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

Zdrojový kód

API

Vlastnosti

Atribut Vlastnost Reflect Typ Výchozí

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

Atribut	Vlastnost	Reflect	Typ	Výchozí
`variant`	`variant`		`'small' \| 'large'`	`'large'`
Varianta odznaku. Možné hodnoty: `small`: Malý odznak, nezobrazuje text. `large`: Velký odznak, zobrazuje text.

Varianta odznaku. Možné hodnoty:

small: Malý odznak, nezobrazuje text.
large: Velký odznak, zobrazuje text.

Slots

Název
(výchozí)
Text zobrazený v odznaku.

CSS Custom Properties

Název
`--shape-corner`
Velikost zaoblení rohů komponenty. Lze zadat konkrétní hodnotu v pixelech; doporučuje se však odkazovat na Designové tokeny.

Předchozí kapitola

Avatar Avatar

Další kapitola

BottomAppBar Spodní aplikační lišta