Skip to main content

ion-badge

shadow

徽章是内联块元素,通常出现在另一个元素附近。通常它们包含数字或其他字符。它们可以用作通知,表明存在与元素关联的其他项目,并指示有多少个项目。如果没有传入任何内容,徽章将被隐藏。

¥Badges are inline block elements that usually appear near another element. Typically they contain a number or other characters. They can be used as a notification that there are additional items associated with an element and indicate how many items there are. Badges are hidden if no content is passed in.

基本用法

¥Basic Usage

标签按钮中的标记

¥Badges in Tab Buttons

可以在选项卡按钮内添加标记,通常用于指示通知或高亮与元素相关的其他项目。

¥Badges can be added inside a tab button, often used to indicate notifications or highlight additional items associated with the element.

信息

空标记仅适用于 md 模式。

¥Empty badges are only available for md mode.

主题化

¥Theming

颜色

¥Colors

CSS 属性

¥CSS Properties

属性

¥Properties

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.
Attributemode
Type"ios" | "md"
Defaultundefined

事件

¥Events

No events available for this component.

方法

¥Methods

No public methods available for this component.

CSS 阴影部分

¥CSS Shadow Parts

No CSS shadow parts available for this component.

CSS 自定义属性

¥CSS Custom Properties

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

插槽

¥Slots

No slots available for this component.