ion-badge
Ionic4项目中我们可以使用Ionic4徽章组件ion-badge对项目进行布局。 ion-badge官方文档地址:https://ionicframework.com/docs/api/badgeBadges 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-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>
import React from 'react';
import { IonBadge, IonItem, IonLabel } from '@ionic/react';
const Example: React.SFC<{}> = () => (
<>
{/*-- Default --*/}
<IonBadge>99IonBadge>
{/*-- Colors --*/}
<IonBadge color="primary">11IonBadge>
<IonBadge color="secondary">22IonBadge>
<IonBadge color="tertiary">33IonBadge>
<IonBadge color="success">44IonBadge>
<IonBadge color="warning">55IonBadge>
<IonBadge color="danger">66IonBadge>
<IonBadge color="light">77IonBadge>
<IonBadge color="medium">88IonBadge>
<IonBadge color="dark">99IonBadge>
{/*-- Item with badge on left and right --*/}
<IonItem>
<IonBadge slot="start">11IonBadge>
<IonLabel>My ItemIonLabel>
<IonBadge slot="end">22IonBadge>
IonItem>
>
);
export default Example;
<template>
<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>
template>
ion-badge 属性(Properties)
color | |
---|---|
Description | The color to use from your application's color palette.
Default options are: |
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 |