mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
06c9377192
* test(e2e): update standalone tests for snapshot * fix(standalone): improve component fonts, box-sizing, etc * refactor(input): separate textarea styles from input and rename classes * fix(datetime): change position in an item so cover is over item
ion-chip
Chips represent complex entities in small blocks, such as a contact.
<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="warning">
<ion-label>Warning</ion-label>
</ion-chip>
<ion-chip color="danger">
<ion-label>Danger</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-avatar>
<img src="assets/img/my-img.png">
</ion-avatar>
<ion-label>Default</ion-label>
</ion-chip>
<ion-chip #chip1>
<ion-label>Default</ion-label>
<ion-button clear color="light" (click)="delete(chip1)">
<ion-icon name="close-circle"></ion-icon>
</ion-button>
</ion-chip>
<ion-chip #chip2>
<ion-icon name="pin" color="primary"></ion-icon>
<ion-label>With Icon</ion-label>
<ion-button (click)="delete(chip2)">
<ion-icon name="close"></ion-icon>
</ion-button>
</ion-chip>
<ion-chip #chip3>
<ion-avatar>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</ion-avatar>
<ion-label>With Avatar</ion-label>
<ion-button clear color="dark" (click)="delete(chip3)">
<ion-icon name="close-circle"></ion-icon>
</ion-button>
</ion-chip>
Properties
color
string
mode
any
Attributes
color
string
mode
any
Built by StencilJS