Question

Ionic4 项目中我们可以使用 Ionic4 徽章组件 ion-badge 对项目进行布局。

ion-badge 官方文档地址：https://ionicframework.com/docs/api/badge

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.

ion-badge 用法 Usage

<ion-list>
  <ion-item>
    <ion-badge slot="start">11</ion-badge>
    <ion-label>Badge in start slot</ion-label>
  </ion-item>
  <ion-item>
    <ion-badge slot="end">22</ion-badge>
    <ion-label>Badge in end slot</ion-label>
  </ion-item>
</ion-list>

ion-badge 属性 Properties

color
Description	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 .
Attribute	color
Type	string | undefined
mode
Description	The mode determines which platform styles to use.
Attribute	mode
Type	"ios" | "md"

ion-badge 中的 CSS 自定义属性

Name	Description
--background	Background of the badge
--color	Text color of the badge
--padding-bottom	Padding bottom of the badge
--padding-end	Padding end of the badge
--padding-start	Padding start of the badge
--padding-top	Padding top of the badge