MDUIDocs
Kopírovat odkaz llms.txtKopírovat odkaz llms-full.txtZobrazit tuto stránku jako MarkdownDiskutovat o této stránce s ChatGPTDiskutovat o úplné dokumentaci projektu s ChatGPT
Přednastavená barva
Vlastní barva
Extrahovat barvu z tapety
Vyberte prosím tapetu
Začínáme
Vývoj s pomocí AI
Styly
Integrace s frameworky
Komponenty
Avatar AvatarBadge OdznakBottomAppBar Spodní aplikační lištaButton TlačítkoButtonIcon Ikonové tlačítkoCard KartaCheckbox Zaškrtávací políčkoChip ChipCircularProgress Kruhový indikátor průběhuCollapse Sbalovací panelDialog DialogDivider OddělovačDropdown Rozbalovací nabídkaFab Plovoucí akční tlačítkoIcon IkonaLayout RozvrženíLinearProgress Lineární indikátor průběhuList SeznamMenu NabídkaNavigationBar Navigační lištaNavigationDrawer Boční navigační panelNavigationRail Postranní navigační lištaRadio PřepínačRangeSlider Posuvník rozsahuSelect VýběrSegmentedButton Segmentované tlačítkoSlider PosuvníkSnackbar SnackbarSwitch SpínačTabs ZáložkyTextField Textové poleTooltip TooltipTopAppBar Horní aplikační lišta
Funkce
Knihovny

BadgeOdznak

バッジは、カウントや状態表示などの動的な情報を表示するために使用されます。テキストや数字を含めることができます。

使用方法

コンポーネントを必要に応じてインポートします:

import 'mdui/components/badge.js';

コンポーネントの TypeScript 型を必要に応じてインポートします:

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

使用例:

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

形状

variant 属性を使用してバッジの形状を設定します。variantlarge の場合、大きなバッジが表示されます。表示するテキストはデフォルトスロットで指定できます。

API

Vlastnosti

AtributVlastnostReflectTypVýchozí
variantvariant'small' | 'large''large'

バッジの形状です。次の値を指定します:

  • small:小型バッジ。テキストは表示されません。
  • large:大型バッジ。テキストが表示されます。

Slots

Název
(výchozí)

バッジに表示されるテキスト

CSS Custom Properties

Název
--shape-corner

コンポーネントの角丸のサイズ。ピクセル値で直接指定できますが、デザイントークンを参照することをお勧めします。

Obsah na této stránce