跳到主要内容
版本:v8

徽章组件

shadow

徽章是内联块状元素,通常出现在其他元素附近。它们通常包含数字或其他字符。可以用作通知,指示与某个元素关联的额外项目数量。如果未传入内容,徽章会自动隐藏。

基础用法

标签按钮中的徽章

徽章可以添加到标签按钮内部,通常用于指示通知或高亮显示与该元素关联的额外项目。

信息

空徽章仅在 md 模式下可用。

主题定制

颜色

CSS 属性

属性

color

DescriptionThe color to use from your application's color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". For more information on colors, see theming.
Attributecolor
Type"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string | undefined
Defaultundefined

mode

DescriptionThe mode determines which platform styles to use.

This is a virtual property that is set once during initialization and will not update if you change its value after the initial render.
Attributemode
Type"ios" | "md"
Defaultundefined

事件

No events available for this component.

方法

No public methods available for this component.

CSS Shadow Parts

No CSS shadow parts available for this component.

CSS 自定义属性

NameDescription
--backgroundBackground of the badge
--colorText color of the badge
--padding-bottomBottom padding of the badge
--padding-endRight padding if direction is left-to-right, and left padding if direction is right-to-left of the badge
--padding-startLeft padding if direction is left-to-right, and right padding if direction is right-to-left of the badge
--padding-topTop padding of the badge

插槽

No slots available for this component.