Ionic chip元素

本文概述

• 轮廓 chip元素
• 添加图标和头像
• 造型 chip元素

Ionic chip元素代表小盒子中的复杂实体, 例如触点。它只是一个元素或组件, 可用于在应用程序内部的某些文本系统中显示信息。它是一个漂亮的类似气泡的容器, 用于容纳文本和图标。它可以包含许多不同的Ionic元素, 例如文本, 头像和图标。我们可以从以下示例中了解它。

例

<ion-header>
  <ion-toolbar color="light">
    <ion-title>Ionic Chip</ion-title>
  </ion-toolbar>
</ion-header>
  
<ion-content class="ion-padding">
  <h1>Chips Example</h1>
  <ion-chip>
    <ion-label>Default</ion-label>
  </ion-chip>
</ion-content>

输出：

轮廓 chip元素

我们还可以配置Ionic chip元素的边框。默认情况下, Ionic的形状为实体。但是, 可以通过使用outline属性进行更改。以下示例对其进行了更清晰的说明。

例

<ion-header>
  <ion-toolbar color="light">
    <ion-title>Ionic Chip</ion-title>
  </ion-toolbar>
</ion-header>
  
<ion-content class="ion-padding">
  <h1>Chips Example</h1>
  <ion-chip>
    <ion-label>Default</ion-label>
  </ion-chip>
  <ion-chip outline>Outline Chip</ion-chip>
</ion-content>

输出：

执行应用程序时, 它将显示以下输出。在这里, 你可以看到默认 chip元素和轮廓 chip元素之间的区别。

添加图标和头像

Ionic允许在 chip元素组件中添加图标和头像媒体。要在<ion-chip>中添加图标和头像, 你需要将<ion-icon>和<ion-avatar>组件放置在<ion-chip>中。以下示例说明了如何将图标和头像添加到 chip元素组件。

例

<ion-header>
  <ion-toolbar color="light">
    <ion-title>Ionic Chip</ion-title>
  </ion-toolbar>
</ion-header>
  
<ion-content class="ion-padding">
  <h1>Adding icons and Avatar</h1>
  <ion-chip>
    <ion-icon name="pin"></ion-icon>
    <ion-label>Default</ion-label>
  </ion-chip>
  
  <ion-chip>
    <ion-label>Button 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>
    <ion-avatar>
      <img src="assets/avatar.png">
    </ion-avatar>
    <ion-label>Avatar Chip</ion-label>
    <ion-icon name="close-circle"></ion-icon>
  </ion-chip>
</ion-content>

输出：

造型 chip元素

chip元素组件也可以以不同的样式着色。要更改<ion-chip>的样式, 请使用color属性。以下示例说明了 chip元素组件内部颜色属性的用法。

例

<ion-header>
  <ion-toolbar color="light">
    <ion-title>Ionic Chip</ion-title>
  </ion-toolbar>
</ion-header>
  
<ion-content class="ion-padding">
  <h1>Styling Chip</h1>
  <ion-chip>
    <ion-label>Default</ion-label>
  </ion-chip>
  
  <ion-chip>
    <ion-label color="secondary">Secondary Label</ion-label>
  </ion-chip>
  
  <ion-chip color="secondary">
    <ion-label color="dark">Secondary w/ Dark label</ion-label>
  </ion-chip>
  
  <ion-chip color="danger">
    <ion-label>Danger</ion-label>
  </ion-chip>
</ion-content>

输出：