mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
7e50219d24
* theme-builder wip * Theme Builder updates - new CSS variable support - realtime color updating with alpha support (rgb generation) - auto tint/shade/contrast generation - auto step generation - CSS variable highlighting (forward and backwards) - Colourlovers Palette search (via local proxy) * Theme Builder Updates - Settings for auto generation - updated to 10 steps per background/ext - general cleanup - added instructions - re-worked shade/tint to mix black and white instead of lighten/darken - scoped cssText into component - apply theme to theme builder also to style internal buttons SCSS Updates - added 10 steps to reach platform - updated SCSS to use same mix and color methods as theme builder * material design color step fix * readme files fixes #13985 fixes #13986
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 with StencilJS