Ionic 芯片

Ionic chip 代表一个小的盒子里的复杂实体，例如联系人。它只是一个元素或组件，您可以使用它来在应用程序内部的某些文本系统中显示信息。它是一个非常类似气泡的容器，用于保存文本和图标。它可以包含许多不同的 Ionic 元素，例如文本、头像和图标。 我们可以从以下示例中理解它。

示例

输出

轮廓 Chip

我们还可以配置 Ionic chip 的边框。 默认情况下，Ionic 的形状是实心。 但是，可以使用 outline 属性来更改它。 下面的示例更清楚地说明了这一点。

示例

输出

当您执行应用程序时，它将显示以下输出。 在这里，您可以看到默认芯片和轮廓芯片之间的区别。

添加图标和头像

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

示例

输出

设置 Chip 样式

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

示例

输出