メインコンテンツまでスキップ
Version: v6

ion-chip

shadow

Contents

Chipは連絡先などを複数の小さなエンティティで表示します。 Chipにはavatars, text, や iconsなど、いくつかの異なる要素を含めることができます。

Usage

<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 [disabled]="true">
<ion-label>Disabled Chip</ion-label>
</ion-chip>

<ion-chip>
<ion-icon name="pin"></ion-icon>
<ion-label>Default</ion-label>
</ion-chip>

<ion-chip>
<ion-icon name="heart" color="dark"></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="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
</ion-avatar>
<ion-label>Avatar Chip</ion-label>
<ion-icon name="close-circle"></ion-icon>
</ion-chip>

Properties

color

DescriptionThe 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.
Attributecolor
Typestring | undefined
Defaultundefined

disabled

DescriptionIf true, the user cannot interact with the chip.
Attributedisabled
Typeboolean
Defaultfalse

mode

DescriptionThe mode determines which platform styles to use.
Attributemode
Type"ios" | "md"
Defaultundefined

outline

DescriptionDisplay an outline style button.
Attributeoutline
Typeboolean
Defaultfalse

CSS Custom Properties

NameDescription
--backgroundBackground of the chip
--colorColor of the chip
View Source