Ionic chip元素 _Ionicchip元素

本文概述

轮廓 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="http://www.srcmini.com/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>

【Ionic chip元素】输出：