Flutter教程

ion-badge

概要(CONTENTS)

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-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: "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