ion-badge

概要(CONTENTS)

Ionic4项目中我们可以使用Ionic4徽章组件ion-badge对项目进行布局。ion-badge中有ionic ion-badge 用法(Usage) ,ionic ion-badge 属性(Properties) ,ionic ion-badge 中的CSS 自定义属性等

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)

angular javascript

<ion-badge>99ion-badge>


<ion-badge color="primary">11ion-badge>
<ion-badge color="secondary">22ion-badge>
<ion-badge color="tertiary">33ion-badge>
<ion-badge color="success">44ion-badge>
<ion-badge color="warning">55ion-badge>
<ion-badge color="danger">66ion-badge>
<ion-badge color="light">77ion-badge>
<ion-badge color="medium">88ion-badge>
<ion-badge color="dark">99ion-badge>


<ion-item>
  <ion-badge slot="start">11ion-badge>
  <ion-label>My Itemion-label>
  <ion-badge slot="end">22ion-badge>
ion-item>

<ion-badge>99ion-badge>


<ion-badge color="primary">11ion-badge>
<ion-badge color="secondary">22ion-badge>
<ion-badge color="tertiary">33ion-badge>
<ion-badge color="success">44ion-badge>
<ion-badge color="warning">55ion-badge>
<ion-badge color="danger">66ion-badge>
<ion-badge color="light">77ion-badge>
<ion-badge color="medium">88ion-badge>
<ion-badge color="dark">99ion-badge>


<ion-item>
  <ion-badge slot="start">11ion-badge>
  <ion-label>My Itemion-label>
  <ion-badge slot="end">22ion-badge>
ion-item>

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