mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
147a6090e4
* Cleanup for iOS mode used in material variables Refactor to alpha variables for colors in the color map updated theme builder with new alpha variables updated theme builder with duplicate default CSS modes * moved alpha transform into css-var removed ion-color-alpha fixes for disabled css-variable mode added defaults for user configurable variables * revert to spinner related code
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", "tertiary", "success", "warning", "danger", "light", "medium", 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", "tertiary", "success", "warning", "danger", "light", "medium", and "dark".
mode
The mode determines which platform styles to use.
Possible values are: "ios" or "md".
Built with StencilJS