跳到主要内容
版本:v8

ion-badge

shadow

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

基础用法

标签按钮中的徽章

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

信息

空徽章仅适用于 md 模式。

主题定制

颜色

CSS 属性

Properties

color

说明The 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.
属性color
类型"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string | undefined
默认值undefined

mode

说明The mode determines which platform styles to use.

这是一个虚拟属性,在初始化时设置一次,之后更改其值不会更新组件。
属性mode
类型"ios" | "md"
默认值undefined

Events

该组件没有可用的事件。

Methods

该组件没有可用的公共方法。

CSS Shadow Parts

该组件没有可用的 CSS 阴影部分。

CSS Custom Properties

Name说明
--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

该组件没有可用的插槽。