mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
f41bb39ce3
* wip * wip * wip * wip * CSS variable cleanup added css variable example * reverted example * wip * name fixes for tabbar and item * wip - alpha support * wip - all the things * wip * wip * PR cleanup * cleanup to ion-color * switched to double quotes * PR cleanup Added TODO for color-mod comments * reverted ios variable for transition. * style cleanup added -ion prefix to all css variables updated default.css to mirror SASS values cleanup/update to oceanic css * removed 'dark' theme files cleanup from scss-lint report
ion-chip
Chips represent complex entities in small blocks, such as a contact. A chip can contain several different elements such as avatars, text, buttons, and icons.
<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>
<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-chip-button fill="clear" color="light">
<ion-icon name="close-circle"></ion-icon>
</ion-chip-button>
</ion-chip>
<ion-chip>
<ion-icon name="pin" color="primary"></ion-icon>
<ion-label>Icon Chip</ion-label>
<ion-chip-button>
<ion-icon name="close"></ion-icon>
</ion-chip-button>
</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-chip-button fill="clear" color="dark">
<ion-icon name="close-circle"></ion-icon>
</ion-chip-button>
</ion-chip>
Properties
color
string
The color to use.
Default options are: "primary", "secondary", "danger", "light", and "dark".
mode
The mode determines which platform styles to use.
Possible values are: "ios" or "md".
Attributes
color
string
The color to use.
Default options are: "primary", "secondary", "danger", "light", and "dark".
mode
The mode determines which platform styles to use.
Possible values are: "ios" or "md".
Built by StencilJS