Flutter教程

ion-chip

概要(CONTENTS)

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

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

Chips represent complex entities in small blocks, such as a contact. A chip can contain several different elements such as avatars, text, and icons.

ion-chip 用法(Usage)

<ion-chip>
  <ion-label>Defaultion-label>
ion-chip>

<ion-chip>
  <ion-label color="secondary">Secondary Labelion-label>
ion-chip>

<ion-chip color="secondary">
  <ion-label color="dark">Secondary w/ Dark labelion-label>
ion-chip>

<ion-chip>
  <ion-icon name="pin">ion-icon>
  <ion-label>Defaultion-label>
ion-chip>

<ion-chip>
  <ion-icon name="heart" color="dark">ion-icon>
  <ion-label>Defaultion-label>
ion-chip>

<ion-chip>
  <ion-label>Button Chipion-label>
  <ion-icon name="close-circle">ion-icon>
ion-chip>

<ion-chip>
  <ion-icon name="pin" color="primary">ion-icon>
  <ion-label>Icon Chipion-label>
  <ion-icon name="close">ion-icon>
ion-chip>

<ion-chip>
  <ion-avatar>
    <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
  ion-avatar>
  <ion-label>Avatar Chipion-label>
  <ion-icon name="close-circle">ion-icon>
ion-chip>
<ion-chip>
  <ion-label>Defaultion-label>
ion-chip>

<ion-chip>
  <ion-label color="secondary">Secondary Labelion-label>
ion-chip>

<ion-chip color="secondary">
  <ion-label color="dark">Secondary w/ Dark labelion-label>
ion-chip>

<ion-chip>
  <ion-icon name="pin">ion-icon>
  <ion-label>Defaultion-label>
ion-chip>

<ion-chip>
  <ion-icon name="heart" color="dark">ion-icon>
  <ion-label>Defaultion-label>
ion-chip>

<ion-chip>
  <ion-label>Button Chipion-label>
  <ion-icon name="close-circle">ion-icon>
ion-chip>

<ion-chip>
  <ion-icon name="pin" color="primary">ion-icon>
  <ion-label>Icon Chipion-label>
  <ion-icon name="close">ion-icon>
ion-chip>

<ion-chip>
  <ion-avatar>
    <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
  ion-avatar>
  <ion-label>Avatar Chipion-label>
  <ion-icon name="close-circle">ion-icon>
ion-chip>
import React from 'react';

import { IonChip, IonLabel, IonIcon, IonAvatar } from '@ionic/react';

const ChipExample: React.SFC<{}> = () => (
  <>
    <IonChip>
      <IonLabel>DefaultIonLabel>
    IonChip>

    <IonChip>
      <IonLabel color="secondary">Secondary LabelIonLabel>
    IonChip>

    <IonChip color="secondary">
      <IonLabel color="dark">Secondary w/ Dark labelIonLabel>
    IonChip>

    <IonChip>
      <IonIcon name="pin" />
      <IonLabel>DefaultIonLabel>
    IonChip>

    <IonChip>
      <IonIcon name="heart" color="dark" />
      <IonLabel>DefaultIonLabel>
    IonChip>

    <IonChip>
      <IonLabel>Button ChipIonLabel>
      <IonIcon name="close-circle" />
    IonChip>

    <IonChip>
      <IonIcon name="pin" color="primary" />
      <IonLabel>Icon ChipIonLabel>
      <IonIcon name="close" />
    IonChip>

    <IonChip>
      <IonAvatar>
        <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />
      IonAvatar>
      <IonLabel>Avatar ChipIonLabel>
      <IonIcon name="close-circle" />
    IonChip>
  >
);

export default ChipExample;
<template>
  <ion-chip>
    <ion-label>Defaultion-label>
  ion-chip>

  <ion-chip>
    <ion-label color="secondary">Secondary Labelion-label>
  ion-chip>

  <ion-chip color="secondary">
    <ion-label color="dark">Secondary w/ Dark labelion-label>
  ion-chip>

  <ion-chip>
    <ion-icon name="pin">ion-icon>
    <ion-label>Defaultion-label>
  ion-chip>

  <ion-chip>
    <ion-icon name="heart" color="dark">ion-icon>
    <ion-label>Defaultion-label>
  ion-chip>

  <ion-chip>
    <ion-label>Button Chipion-label>
    <ion-icon name="close-circle">ion-icon>
  ion-chip>

  <ion-chip>
    <ion-icon name="pin" color="primary">ion-icon>
    <ion-label>Icon Chipion-label>
    <ion-icon name="close">ion-icon>
  ion-chip>

  <ion-chip>
    <ion-avatar>
      <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
    ion-avatar>
    <ion-label>Avatar Chipion-label>
    <ion-icon name="close-circle">ion-icon>
  ion-chip>
template>

ion-chip 属性(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"

outline

Description

Display an outline style button.

Attribute outline
Type boolean
Default false

ion-chip中的CSS 自定义属性

Name Description
--background Background of the chip
--color Color of the chip