Question

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-avatar>
    <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
  </ion-avatar>
  <ion-label>Avatar Chip</ion-label>
  <ion-icon name="close-circle"></ion-icon>
</ion-chip>
<ion-chip>
  <ion-icon name="pin" color="primary"></ion-icon>
  <ion-label>Icon Chip</ion-label>
  <ion-icon name="close"></ion-icon>
</ion-chip>

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