javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-16 01:52:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(chip): update styles, remove chip-icon and chip-button (#16264)

Browse Source 
This reimplements chip, removing the extraneous chip-button and chip-icon components and updating the design to match the updated Material Design spec.
This commit is contained in:
Cam Wiegert
2018-11-08 14:58:29 -06:00
committed by GitHub
parent 6794447e10
commit 91f07bc097
28 changed files with 304 additions and 1177 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
angular/BREAKING.md
View File

@ -20,7 +20,6 @@ A list of the breaking changes introduced to each component in Ionic Angular v4.
- [Alert](#alert)
- [Back Button](#back-button)
- [Button](#button)
- [Chip](#chip)
- [Colors](#colors)
- [Content](#content)
- [Datetime](#datetime)
@ -250,34 +249,6 @@ The `small` and `large` attributes are now combined under the `size` attribute.
</ion-button>
```
## Chip
### Markup Changed
Buttons inside of an `<ion-chip>` container should now be written as an `<ion-chip-button>` element. Ionic will determine when to render an anchor tag based on the presence of an `href` attribute.
**Old Usage Example:**
```html
<ion-chip>
<ion-label>Default</ion-label>
<ion-button clear color="light">
<ion-icon name="close-circle"></ion-icon>
</ion-button>
</ion-chip>
```
**New Usage Example:**
```html
<ion-chip>
<ion-label>Default</ion-label>
<ion-chip-button fill="clear" color="light">
<ion-icon name="close-circle"></ion-icon>
</ion-chip-button>
</ion-chip>
```
## Colors

2
angular/src/directives/proxies-list.txt
View File

@ -16,8 +16,6 @@ export const DIRECTIVES = [
d.CardTitle,
d.Checkbox,
d.Chip,
d.ChipButton,
d.ChipIcon,
d.Col,
d.Content,
d.Datetime,

26
angular/src/directives/proxies.ts
View File

@ -168,35 +168,13 @@ export class Checkbox {
}
export declare interface Chip extends StencilComponents<'IonChip'> {}
@Component({ selector: 'ion-chip', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['color', 'mode'] })
@Component({ selector: 'ion-chip', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'outline'] })
export class Chip {
constructor(c: ChangeDetectorRef, r: ElementRef) {
c.detach();
const el = r.nativeElement;
proxyInputs(this, el, ['color', 'mode']);
}
}
export declare interface ChipButton extends StencilComponents<'IonChipButton'> {}
@Component({ selector: 'ion-chip-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'disabled', 'fill', 'href'] })
export class ChipButton {
constructor(c: ChangeDetectorRef, r: ElementRef) {
c.detach();
const el = r.nativeElement;
proxyInputs(this, el, ['color', 'mode', 'disabled', 'fill', 'href']);
}
}
export declare interface ChipIcon extends StencilComponents<'IonChipIcon'> {}
@Component({ selector: 'ion-chip-icon', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'fill', 'name', 'src'] })
export class ChipIcon {
constructor(c: ChangeDetectorRef, r: ElementRef) {
c.detach();
const el = r.nativeElement;
proxyInputs(this, el, ['color', 'mode', 'fill', 'name', 'src']);
proxyInputs(this, el, ['color', 'mode', 'outline']);
}
}

118
core/src/components.d.ts vendored
View File

@ -819,96 +819,6 @@ export namespace Components {
'value'?: string;
}
interface IonChipButton {
/**
* The 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](/docs/theming/basics).
*/
'color'?: Color;
/**
* If `true`, the user cannot interact with the chip button.
*/
'disabled': boolean;
/**
* Set to `"clear"` for a transparent button or to `"solid"` for a filled background.
*/
'fill': 'clear' | 'solid';
/**
* Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
*/
'href'?: string;
/**
* The mode determines which platform styles to use.
*/
'mode': Mode;
}
interface IonChipButtonAttributes extends StencilHTMLAttributes {
/**
* The 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](/docs/theming/basics).
*/
'color'?: Color;
/**
* If `true`, the user cannot interact with the chip button.
*/
'disabled'?: boolean;
/**
* Set to `"clear"` for a transparent button or to `"solid"` for a filled background.
*/
'fill'?: 'clear' | 'solid';
/**
* Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
*/
'href'?: string;
/**
* The mode determines which platform styles to use.
*/
'mode'?: Mode;
}
interface IonChipIcon {
/**
* The 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](/docs/theming/basics).
*/
'color'?: Color;
/**
* Set to `"clear"` for a transparent icon or to `"solid"` for a filled background.
*/
'fill': 'clear' | 'solid';
/**
* The mode determines which platform styles to use.
*/
'mode': Mode;
/**
* The icon to use. Possible values are the same as `"ion-icon"`.
*/
'name'?: string;
/**
* The icon src to use. Possible values are the same as `"ion-icon"`.
*/
'src'?: string;
}
interface IonChipIconAttributes extends StencilHTMLAttributes {
/**
* The 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](/docs/theming/basics).
*/
'color'?: Color;
/**
* Set to `"clear"` for a transparent icon or to `"solid"` for a filled background.
*/
'fill'?: 'clear' | 'solid';
/**
* The mode determines which platform styles to use.
*/
'mode'?: Mode;
/**
* The icon to use. Possible values are the same as `"ion-icon"`.
*/
'name'?: string;
/**
* The icon src to use. Possible values are the same as `"ion-icon"`.
*/
'src'?: string;
}
interface IonChip {
/**
* The 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](/docs/theming/basics).
@ -918,6 +828,10 @@ export namespace Components {
* The mode determines which platform styles to use.
*/
'mode': Mode;
/**
* Display an outline style button.
*/
'outline': boolean;
}
interface IonChipAttributes extends StencilHTMLAttributes {
/**
@ -928,6 +842,10 @@ export namespace Components {
* The mode determines which platform styles to use.
*/
'mode'?: Mode;
/**
* Display an outline style button.
*/
'outline'?: boolean;
}
interface IonCol {
@ -5197,8 +5115,6 @@ declare global {
'IonCardTitle': Components.IonCardTitle;
'IonCard': Components.IonCard;
'IonCheckbox': Components.IonCheckbox;
'IonChipButton': Components.IonChipButton;
'IonChipIcon': Components.IonChipIcon;
'IonChip': Components.IonChip;
'IonCol': Components.IonCol;
'IonContent': Components.IonContent;
@ -5299,8 +5215,6 @@ declare global {
'ion-card-title': Components.IonCardTitleAttributes;
'ion-card': Components.IonCardAttributes;
'ion-checkbox': Components.IonCheckboxAttributes;
'ion-chip-button': Components.IonChipButtonAttributes;
'ion-chip-icon': Components.IonChipIconAttributes;
'ion-chip': Components.IonChipAttributes;
'ion-col': Components.IonColAttributes;
'ion-content': Components.IonContentAttributes;
@ -5496,18 +5410,6 @@ declare global {
new (): HTMLIonCheckboxElement;
};
interface HTMLIonChipButtonElement extends Components.IonChipButton, HTMLStencilElement {}
var HTMLIonChipButtonElement: {
prototype: HTMLIonChipButtonElement;
new (): HTMLIonChipButtonElement;
};
interface HTMLIonChipIconElement extends Components.IonChipIcon, HTMLStencilElement {}
var HTMLIonChipIconElement: {
prototype: HTMLIonChipIconElement;
new (): HTMLIonChipIconElement;
};
interface HTMLIonChipElement extends Components.IonChip, HTMLStencilElement {}
var HTMLIonChipElement: {
prototype: HTMLIonChipElement;
@ -5996,8 +5898,6 @@ declare global {
'ion-card-title': HTMLIonCardTitleElement
'ion-card': HTMLIonCardElement
'ion-checkbox': HTMLIonCheckboxElement
'ion-chip-button': HTMLIonChipButtonElement
'ion-chip-icon': HTMLIonChipIconElement
'ion-chip': HTMLIonChipElement
'ion-col': HTMLIonColElement
'ion-content': HTMLIonContentElement
@ -6098,8 +5998,6 @@ declare global {
'ion-card-title': HTMLIonCardTitleElement;
'ion-card': HTMLIonCardElement;
'ion-checkbox': HTMLIonCheckboxElement;
'ion-chip-button': HTMLIonChipButtonElement;
'ion-chip-icon': HTMLIonChipIconElement;
'ion-chip': HTMLIonChipElement;
'ion-col': HTMLIonColElement;
'ion-content': HTMLIonContentElement;

81
core/src/components/chip-button/chip-button.scss
View File

@ -1,81 +0,0 @@
@import "./chip-button.vars";
// Chip Button
// --------------------------------------------------
:host {
/**
* @prop --background: Background of the Chip Button
* @prop --color: Color of the Chip Button
* @prop --border-radius: Border radius of the Chip Button
* @prop --margin-top: Margin top of the Chip Button
* @prop --margin-end: Margin end of the Chip Button
* @prop --margin-bottom: Margin bottom of the Chip Button
* @prop --margin-start: Margin start of the Chip Button
* @prop --width: Width of the Chip Button
* @prop --height: Height of the Chip Button
*/
--border-radius: #{$chip-button-border-radius};
--margin-top: #{$chip-button-margin-top};
--margin-end: #{$chip-button-margin-end};
--margin-bottom: #{$chip-button-margin-bottom};
--margin-start: #{$chip-button-margin-start};
--width: #{$chip-button-width};
--height: #{$chip-button-height};
width: var(--width);
height: var(--height);
font-size: #{$chip-button-font-size};
}
:host(.chip-button-clear) {
--background: transparent;
--color: #{$chip-button-clear-color};
}
:host(.chip-button-solid) {
--background: #{ion-color(primary, base)};
--color: #{ion-color(primary, contrast)};
}
:host(.chip-button-solid.ion-color) .button-native {
background: current-color(base);
color: current-color(contrast);
}
:host(.chip-button-clear.ion-color) .button-native {
background: transparent;
color: current-color(base);
}
.button-native {
@include text-inherit();
@include border-radius(var(--border-radius));
@include margin(var(--margin-top), var(--margin-end), var(--margin-bottom), var(--margin-start));
position: relative;
width: var(--width);
height: var(--height);
border: 0;
outline: none;
background: var(--background);
color: var(--color);
appearance: none;
}
.button-inner {
display: flex;
flex-flow: row nowrap;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}

68
core/src/components/chip-button/chip-button.tsx
View File

@ -1,68 +0,0 @@
import { Component, ComponentInterface, Element, Prop } from '@stencil/core';
import { Color, Mode } from '../../interface';
import { createColorClasses } from '../../utils/theme';
@Component({
tag: 'ion-chip-button',
styleUrl: 'chip-button.scss',
shadow: true
})
export class ChipButton implements ComponentInterface {
@Element() el!: HTMLElement;
/**
* The 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](/docs/theming/basics).
*/
@Prop() color?: Color;
/**
* The mode determines which platform styles to use.
*/
@Prop() mode!: Mode;
/**
* If `true`, the user cannot interact with the chip button.
*/
@Prop() disabled = false;
/**
* Set to `"clear"` for a transparent button or to `"solid"` for a filled background.
*/
@Prop() fill: 'clear' | 'solid' = 'clear';
/**
* Contains a URL or a URL fragment that the hyperlink points to.
* If this property is set, an anchor tag will be rendered.
*/
@Prop() href?: string;
hostData() {
return {
class: {
...createColorClasses(this.color),
[`chip-button-${this.fill}`]: true
}
};
}
render() {
const TagType = this.href === undefined ? 'button' : 'a';
return (
<TagType
type="button"
class="button-native"
disabled={this.disabled}
href={this.href}
>
<span class="button-inner">
<slot></slot>
</span>
{this.mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
</TagType>
);
}
}

31
core/src/components/chip-button/chip-button.vars.scss
View File

@ -1,31 +0,0 @@
@import "../../themes/ionic.globals";
// Chip Button
// --------------------------------------------------
/// @prop - Border radius of the chip button
$chip-button-border-radius: 50% !default;
/// @prop - Margin top of the chip button
$chip-button-margin-top: 0 !default;
/// @prop - Margin end of the chip button
$chip-button-margin-end: $chip-button-margin-top !default;
/// @prop - Margin bottom of the chip button
$chip-button-margin-bottom: $chip-button-margin-top !default;
/// @prop - Margin start of the chip button
$chip-button-margin-start: $chip-button-margin-end !default;
/// @prop - Font size of the chip button
$chip-button-font-size: 32px !default;
/// @prop - Width of the chip button
$chip-button-width: 32px !default;
/// @prop - Width of the chip button
$chip-button-height: 100% !default;
/// @prop - Color of the text in the clear chip button
$chip-button-clear-color: $text-color-step-400 !default;

36
core/src/components/chip-button/readme.md
View File

@ -1,36 +0,0 @@
# ion-chip-button
A ChipButton is an inset button that is placed inside of a Chip. For more information, see the [Chip Docs](../chip)
<!-- Auto Generated Below -->
## Properties
| Property | Attribute | Description | Type | Default |
| ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- |
| `color` | `color` | The 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](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `disabled` | `disabled` | If `true`, the user cannot interact with the chip button. | `boolean` | `false` |
| `fill` | `fill` | Set to `"clear"` for a transparent button or to `"solid"` for a filled background. | `"clear" \| "solid"` | `'clear'` |
| `href` | `href` | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. | `string \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
## CSS Custom Properties
| Name | Description |
| ----------------- | -------------------------------- |
| `--background` | Background of the Chip Button |
| `--border-radius` | Border radius of the Chip Button |
| `--color` | Color of the Chip Button |
| `--height` | Height of the Chip Button |
| `--margin-bottom` | Margin bottom of the Chip Button |
| `--margin-end` | Margin end of the Chip Button |
| `--margin-start` | Margin start of the Chip Button |
| `--margin-top` | Margin top of the Chip Button |
| `--width` | Width of the Chip Button |
----------------------------------------------
*Built with [StencilJS](https://stenciljs.com/)*

26
core/src/components/chip-button/usage/angular.md
View File

@ -1,26 +0,0 @@
```html
<ion-chip>
<ion-label>Button Chip</ion-label>
<ion-chip-button fill="solid" 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 color="dark">
<ion-icon name="close-circle"></ion-icon>
</ion-chip-button>
</ion-chip>
```

26
core/src/components/chip-button/usage/javascript.md
View File

@ -1,26 +0,0 @@
```html
<ion-chip>
<ion-label>Button Chip</ion-label>
<ion-chip-button fill="solid" 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 color="dark">
<ion-icon name="close-circle"></ion-icon>
</ion-chip-button>
</ion-chip>
```

42
core/src/components/chip-icon/chip-icon.scss
View File

@ -1,42 +0,0 @@
@import "./chip-icon.vars";
:host {
/**
* @prop --background: Background of the Chip Icon
* @prop --color: Color of the Chip Icon
*/
@include border-radius(50%);
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--width, 32px);
height: var(--height, 32px);
background: var(--background);
color: var(--color);
font-size: 18px;
}
:host(.chip-icon-clear) {
--background: transparent;
--color: #{$chip-icon-clear-color};
}
:host(.chip-icon-solid) {
--background: #{ion-color(primary, base)};
--color: #{ion-color(primary, contrast)};
}
:host(.chip-icon-solid.ion-color) {
background: current-color(base);
color: current-color(contrast);
}
:host(.chip-icon-clear.ion-color) {
background: transparent;
color: current-color(base);
}

53
core/src/components/chip-icon/chip-icon.tsx
View File

@ -1,53 +0,0 @@
import { Component, ComponentInterface, Prop } from '@stencil/core';
import { Color, Mode } from '../../interface';
import { createColorClasses } from '../../utils/theme';
@Component({
tag: 'ion-chip-icon',
styleUrl: 'chip-icon.scss',
shadow: true
})
export class ChipIcon implements ComponentInterface {
/**
* The 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](/docs/theming/basics).
*/
@Prop() color?: Color;
/**
* The mode determines which platform styles to use.
*/
@Prop() mode!: Mode;
/**
* Set to `"clear"` for a transparent icon or to `"solid"` for a filled background.
*/
@Prop() fill: 'clear' | 'solid' = 'clear';
/**
* The icon to use.
* Possible values are the same as `"ion-icon"`.
*/
@Prop() name?: string;
/**
* The icon src to use.
* Possible values are the same as `"ion-icon"`.
*/
@Prop() src?: string;
hostData() {
return {
class: {
...createColorClasses(this.color),
[`chip-icon-${this.fill}`]: true
}
};
}
render() {
return <ion-icon name={this.name} src={this.src} mode={this.mode}></ion-icon>;
}
}

7
core/src/components/chip-icon/chip-icon.vars.scss
View File

@ -1,7 +0,0 @@
@import "../../themes/ionic.globals";
// Chip Button
// --------------------------------------------------
/// @prop - Color of the text in the clear chip icon
$chip-icon-clear-color: $text-color-step-400 !default;

29
core/src/components/chip-icon/readme.md
View File

@ -1,29 +0,0 @@
# ion-chip-icon
<!-- Auto Generated Below -->
## Properties
| Property | Attribute | Description | Type | Default |
| -------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- |
| `color` | `color` | The 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](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `fill` | `fill` | Set to `"clear"` for a transparent icon or to `"solid"` for a filled background. | `"clear" \| "solid"` | `'clear'` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `name` | `name` | The icon to use. Possible values are the same as `"ion-icon"`. | `string \| undefined` | `undefined` |
| `src` | `src` | The icon src to use. Possible values are the same as `"ion-icon"`. | `string \| undefined` | `undefined` |
## CSS Custom Properties
| Name | Description |
| -------------- | --------------------------- |
| `--background` | Background of the Chip Icon |
| `--color` | Color of the Chip Icon |
----------------------------------------------
*Built with [StencilJS](https://stenciljs.com/)*

30
core/src/components/chip/chip.ios.scss
View File

@ -1,31 +1 @@
@import "./chip";
@import "./chip.ios.vars";
// iOS Chip
// --------------------------------------------------
:host {
--background: #{$chip-ios-background-color};
--color: #{$chip-ios-text-color};
// Chip label
--label-margin-top: #{$chip-ios-label-margin-top};
--label-margin-end: #{$chip-ios-label-margin-end};
--label-margin-bottom: #{$chip-ios-label-margin-bottom};
--label-margin-start: #{$chip-ios-label-margin-start};
// Chip avatar
--avatar-width: #{$chip-ios-avatar-width};
--avatar-height: #{$chip-ios-avatar-height};
--avatar-margin-top: #{$chip-ios-avatar-margin-top};
--avatar-margin-end: #{$chip-ios-avatar-margin-end};
--avatar-margin-bottom: #{$chip-ios-avatar-margin-bottom};
--avatar-margin-start: #{$chip-ios-avatar-margin-start};
@include border-radius($chip-ios-border-radius);
@include margin($chip-ios-margin-top, $chip-ios-margin-end, $chip-ios-margin-bottom, $chip-ios-margin-start);
height: $chip-ios-height;
font-size: $chip-ios-font-size;
}

64
core/src/components/chip/chip.ios.vars.scss
View File

@ -1,64 +0,0 @@
@import "../../themes/ionic.globals.ios";
// iOS Chip
// --------------------------------------------------
/// @prop - Margin top of the chip
$chip-ios-margin-top: 2px !default;
/// @prop - Margin end of the chip
$chip-ios-margin-end: 0 !default;
/// @prop - Margin bottom of the chip
$chip-ios-margin-bottom: $chip-ios-margin-top !default;
/// @prop - Margin start of the chip
$chip-ios-margin-start: $chip-ios-margin-end !default;
/// @prop - Height of the chip
$chip-ios-height: 32px !default;
/// @prop - Border radius of the chip
$chip-ios-border-radius: 16px !default;
/// @prop - Font size of the chip
$chip-ios-font-size: 13px !default;
/// @prop - Text color of the chip
$chip-ios-text-color: $text-color-step-150 !default;
/// @prop - Background color alpha of the chip
$chip-ios-background-color-alpha: .1 !default;
/// @prop - Background color of the chip
$chip-ios-background-color: rgba(var(--ion-text-color-rgb, $text-color-rgb), $chip-ios-background-color-alpha) !default;
/// @prop - Margin top of the label in the chip
$chip-ios-label-margin-top: 0 !default;
/// @prop - Margin end of the label in the chip
$chip-ios-label-margin-end: 10px !default;
/// @prop - Margin bottom of the label in the chip
$chip-ios-label-margin-bottom: $chip-ios-label-margin-top !default;
/// @prop - Margin start of the label in the chip
$chip-ios-label-margin-start: $chip-ios-label-margin-end !default;
/// @prop - Width of the avatar in the chip
$chip-ios-avatar-width: 24px !default;
/// @prop - Height of the avatar in the chip
$chip-ios-avatar-height: $chip-ios-avatar-width !default;
/// @prop - Margin top of the avatar in the chip
$chip-ios-avatar-margin-top: 0 !default;
/// @prop - Margin end of the avatar in the chip
$chip-ios-avatar-margin-end: 4px !default;
/// @prop - Margin bottom of the avatar in the chip
$chip-ios-avatar-margin-bottom: $chip-ios-avatar-margin-top !default;
/// @prop - Margin start of the avatar in the chip
$chip-ios-avatar-margin-start: $chip-ios-avatar-margin-end !default;

30
core/src/components/chip/chip.md.scss
View File

@ -1,31 +1 @@
@import "./chip";
@import "./chip.md.vars";
// Material Design Chip
// --------------------------------------------------
:host {
--background: #{$chip-md-background-color};
--color: #{$chip-md-text-color};
// Chip label
--label-margin-top: #{$chip-md-label-margin-top};
--label-margin-end: #{$chip-md-label-margin-end};
--label-margin-bottom: #{$chip-md-label-margin-bottom};
--label-margin-start: #{$chip-md-label-margin-start};
// Chip avatar
--avatar-width: #{$chip-md-avatar-width};
--avatar-height: #{$chip-md-avatar-height};
--avatar-margin-top: #{$chip-md-avatar-margin-top};
--avatar-margin-end: #{$chip-md-avatar-margin-end};
--avatar-margin-bottom: #{$chip-md-avatar-margin-bottom};
--avatar-margin-start: #{$chip-md-avatar-margin-start};
@include border-radius($chip-md-border-radius);
@include margin($chip-md-margin-top, $chip-md-margin-end, $chip-md-margin-bottom, $chip-md-margin-start);
height: $chip-md-height;
font-size: $chip-md-font-size;
}

64
core/src/components/chip/chip.md.vars.scss
View File

@ -1,64 +0,0 @@
@import "../../themes/ionic.globals.md";
// Material Design Chip
// --------------------------------------------------
/// @prop - Margin top of the chip
$chip-md-margin-top: 2px !default;
/// @prop - Margin end of the chip
$chip-md-margin-end: 0 !default;
/// @prop - Margin bottom of the chip
$chip-md-margin-bottom: $chip-md-margin-top !default;
/// @prop - Margin start of the chip
$chip-md-margin-start: $chip-md-margin-end !default;
/// @prop - Height of the chip
$chip-md-height: 32px !default;
/// @prop - Border radius of the chip
$chip-md-border-radius: 16px !default;
/// @prop - Font size of the chip
$chip-md-font-size: 13px !default;
/// @prop - Text color of the chip
$chip-md-text-color: $text-color-step-150 !default;
/// @prop - Background color alpha of the chip
$chip-md-background-color-alpha: .1 !default;
/// @prop - Background color of the chip
$chip-md-background-color: rgba(var(--ion-text-color-rgb, $text-color-rgb), $chip-md-background-color-alpha) !default;
/// @prop - Margin top of the label in the chip
$chip-md-label-margin-top: 0 !default;
/// @prop - Margin end of the label in the chip
$chip-md-label-margin-end: 10px !default;
/// @prop - Margin bottom of the label in the chip
$chip-md-label-margin-bottom: $chip-md-label-margin-top !default;
/// @prop - Margin start of the label in the chip
$chip-md-label-margin-start: $chip-md-label-margin-end !default;
/// @prop - Width of the avatar in the chip
$chip-md-avatar-width: 24px !default;
/// @prop - Height of the avatar in the chip
$chip-md-avatar-height: $chip-md-avatar-width !default;
/// @prop - Margin top of the avatar in the chip
$chip-md-avatar-margin-top: 0 !default;
/// @prop - Margin end of the avatar in the chip
$chip-md-avatar-margin-end: 4px !default;
/// @prop - Margin bottom of the avatar in the chip
$chip-md-avatar-margin-bottom: $chip-md-avatar-margin-top !default;
/// @prop - Margin start of the avatar in the chip
$chip-md-avatar-margin-start: $chip-md-avatar-margin-end !default;

128
core/src/components/chip/chip.scss
View File

@ -1,60 +1,130 @@
@import "./chip.vars";
// Chip
// --------------------------------------------------
@import "../../themes/ionic.globals";
:host {
/**
* @prop --background: Background of the chip
* @prop --color: Color of the chip
*
* @prop --label-margin-top: Margin top of the chip label
* @prop --label-margin-end: Margin end of the chip label
* @prop --label-margin-bottom: Margin bottom of the chip label
* @prop --label-margin-start: Margin start of the chip label
*
* @prop --avatar-width: Width of the chip avatar
* @prop --avatar-height: Height of the chip avatar
* @prop --avatar-margin-top: Margin top of the chip avatar
* @prop --avatar-margin-end: Margin end of the chip avatar
* @prop --avatar-margin-bottom: Margin bottom of the chip avatar
* @prop --avatar-margin-start: Margin start of the chip avatar
*/
--background: rgba(0, 0, 0, .12);
--color: rgba(0, 0, 0, .87);
@include border-radius(16px);
@include font-smoothing();
@include margin(4px);
@include padding(7px, 12px);
display: inline-flex;
position: relative;
align-items: center;
align-self: center;
height: 32px;
background: var(--background);
color: var(--color);
font-family: $font-family-base;
font-weight: normal;
font-size: 14px;
line-height: 1;
cursor: pointer;
overflow: hidden;
vertical-align: middle;
box-sizing: border-box;
}
:host(:focus) {
outline: none;
}
:host(:hover),
:host(:focus) {
--background: rgba(0, 0, 0, .16);
}
:host(.activated) {
--background: rgba(0, 0, 0, .20);
}
// Colors
:host(.ion-color) {
background: current-color(base);
color: current-color(contrast);
background: current-color(base, .08);
color: current-color(shade);
}
:host(.ion-color)::slotted(*) ion-chip-icon,
:host(.ion-color)::slotted(*) ion-chip-button {
--color: initial;
:host(.ion-color:hover),
:host(.ion-color:focus) {
background: current-color(base, .12);
}
::slotted(*) ion-label {
@include margin(var(--label-margin-top), var(--label-margin-end), var(--label-margin-bottom), var(--label-margin-start));
:host(.ion-color.activated) {
background: current-color(base, .16);
}
::slotted(*) ion-avatar {
@include margin(var(--avatar-margin-top), var(--avatar-margin-end), var(--avatar-margin-bottom), var(--avatar-margin-start));
width: var(--avatar-width);
height: var(--avatar-height);
// Outline
:host(.chip-outline) {
border-width: 1px;
border-style: solid;
}
:host(.chip-outline:not(.ion-color)) {
border-color: rgba(0, 0, 0, .32);
background: transparent;
}
:host(.chip-outline.ion-color) {
border-color: current-color(base, .32);
}
:host(.chip-outline:not(.ion-color):hover),
:host(.chip-outline:not(.ion-color):focus) {
background: rgba(0, 0, 0, .04);
}
:host(.chip-outline.activated:not(.ion-color)) {
background: rgba(0, 0, 0, .08);
}
// Icon
::slotted(ion-icon) {
font-size: 20px;
}
:host(:not(.ion-color)) ::slotted(ion-icon) {
color: rgba(0, 0, 0, .54);
}
::slotted(ion-icon:first-child) {
@include margin(-4px, 8px, -4px, -4px);
}
::slotted(ion-icon:last-child) {
@include margin(-4px, -4px, -4px, 8px);
}
// Avatar
::slotted(ion-avatar) {
width: 24px;
height: 24px;
}
::slotted(ion-avatar:first-child) {
@include margin(-4px, 8px, -4px, -8px);
}
::slotted(ion-avatar:last-child) {
@include margin(-4px, -8px, -4px, 8px);
}

20
core/src/components/chip/chip.tsx
View File

@ -9,7 +9,7 @@ import { createColorClasses } from '../../utils/theme';
ios: 'chip.ios.scss',
md: 'chip.md.scss'
},
scoped: true
shadow: true
})
export class Chip implements ComponentInterface {
/**
@ -24,9 +24,25 @@ export class Chip implements ComponentInterface {
*/
@Prop() mode!: Mode;
/**
* Display an outline style button.
*/
@Prop() outline = false;
hostData() {
return {
class: createColorClasses(this.color),
'ion-activatable': true,
class: {
...createColorClasses(this.color),
'chip-outline': this.outline
}
};
}
render() {
return [
<slot></slot>,
this.mode === 'md' ? <ion-ripple-effect></ion-ripple-effect> : null
];
}
}

4
core/src/components/chip/chip.vars.scss
View File

@ -1,4 +0,0 @@
@import "../../themes/ionic.globals";
// Chip
// --------------------------------------------------

29
core/src/components/chip/readme.md
View File

@ -1,34 +1,25 @@
# 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.
Chips represent complex entities in small blocks, such as a contact. A chip can contain several different elements such as avatars, text, and icons.
<!-- Auto Generated Below -->
## Properties
| Property | Attribute | Description | Type | Default |
| -------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- |
| `color` | `color` | The 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](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| Property | Attribute | Description | Type | Default |
| --------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- |
| `color` | `color` | The 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](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `outline` | `outline` | Display an outline style button. | `boolean` | `false` |
## CSS Custom Properties
| Name | Description |
| ------------------------ | -------------------------------- |
| `--avatar-height` | Height of the chip avatar |
| `--avatar-margin-bottom` | Margin bottom of the chip avatar |
| `--avatar-margin-end` | Margin end of the chip avatar |
| `--avatar-margin-start` | Margin start of the chip avatar |
| `--avatar-margin-top` | Margin top of the chip avatar |
| `--avatar-width` | Width of the chip avatar |
| `--background` | Background of the chip |
| `--color` | Color of the chip |
| `--label-margin-bottom` | Margin bottom of the chip label |
| `--label-margin-end` | Margin end of the chip label |
| `--label-margin-start` | Margin start of the chip label |
| `--label-margin-top` | Margin top of the chip label |
| Name | Description |
| -------------- | ---------------------- |
| `--background` | Background of the chip |
| `--color` | Color of the chip |
----------------------------------------------

185
core/src/components/chip/test/basic/index.html
View File

@ -20,127 +20,78 @@
</ion-header>
<ion-content id="content" padding style="text-align: center">
<h2>Text Chips</h2>
<ion-chip>
<ion-label>Default</ion-label>
</ion-chip>
<ion-chip>
<ion-label color="secondary">Secondary Label</ion-label>
</ion-chip>
<ion-chip>
<ion-label>Another With Longer Text</ion-label>
</ion-chip>
<h2>Color Chips</h2>
<ion-chip color="primary">
<ion-chip-icon name="heart"></ion-chip-icon>
<ion-label>Primary</ion-label>
</ion-chip>
<ion-chip color="secondary">
<ion-label color="dark">Secondary w/ Dark label</ion-label>
</ion-chip>
<ion-chip color="danger">
<ion-label>Danger</ion-label>
</ion-chip>
<h2>Icon Chips</h2>
<ion-chip>
<ion-chip-icon name="pin"></ion-chip-icon>
<ion-label>Default</ion-label>
</ion-chip>
<ion-chip>
<ion-label>Secondary</ion-label>
<ion-chip-icon name="pin" color="secondary"></ion-chip-icon>
</ion-chip>
<ion-chip>
<ion-chip-icon fill="solid" name="pin"></ion-chip-icon>
<ion-label>Solid Default</ion-label>
</ion-chip>
<ion-chip>
<ion-label>Solid Danger</ion-label>
<ion-chip-icon fill="solid" name="pin" color="danger"></ion-chip-icon>
</ion-chip>
<h2>Avatar Chips</h2>
<ion-chip>
<ion-avatar>
<img src="/src/components/avatar/test/avatar.svg">
</ion-avatar>
<ion-label>Default</ion-label>
</ion-chip>
<ion-chip>
<ion-label>Right Avatar</ion-label>
<ion-avatar>
<img src="/src/components/avatar/test/avatar.svg">
</ion-avatar>
</ion-chip>
<h2>Delete Chips</h2>
<ion-chip id="chip1">
<ion-label>Default</ion-label>
<ion-chip-button fill="clear" onclick="del('chip1')" class="my-custom-chip">
<ion-icon name="close-circle"></ion-icon>
</ion-chip-button>
</ion-chip>
<ion-chip id="chip2">
<ion-chip-icon name="pin"></ion-chip-icon>
<ion-label>With Icon</ion-label>
<ion-chip-button onclick="del('chip2')">
<ion-icon name="close"></ion-icon>
</ion-chip-button>
</ion-chip>
<ion-chip id="chip3">
<ion-avatar>
<img src="/src/components/avatar/test/avatar.svg">
</ion-avatar>
<ion-label>With Avatar</ion-label>
<ion-chip-button fill="clear" color="dark" onclick="del('chip3')">
<ion-icon name="close-circle"></ion-icon>
</ion-chip-button>
</ion-chip>
<ion-chip color="primary" id="chip4">
<ion-chip-icon name="pin"></ion-chip-icon>
<ion-label>Primary</ion-label>
<ion-chip-button onclick="del('chip4')">
<ion-icon name="close-circle"></ion-icon>
</ion-chip-button>
</ion-chip>
<ion-item>
<ion-label>Chip Item</ion-label>
<ion-chip slot="end" id="chip5">
<ion-chip-icon name="pin" color="primary"></ion-chip-icon>
<h2>Basic Chips</h2>
<ion-chip>
<ion-label>Default</ion-label>
<ion-chip-button fill="clear" color="light" onclick="del('chip5')">
<ion-icon name="close-circle"></ion-icon>
</ion-chip-button>
</ion-chip>
</ion-item>
</ion-content>
<ion-chip style="border-radius: 4px;">
<ion-label>Border Radius</ion-label>
</ion-chip>
<ion-chip>
<ion-icon name="checkmark-circle"></ion-icon>
<ion-label>With Icon</ion-label>
</ion-chip>
<ion-chip>
<ion-avatar>
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"/>
</ion-avatar>
<ion-label>With Avatar</ion-label>
</ion-chip>
<ion-chip>
<ion-avatar>
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"/>
</ion-avatar>
<ion-label>With Icon and Avatar</ion-label>
<ion-icon name="close-circle"></ion-icon>
</ion-chip>
<script>
function del(chip) {
console.log('called del', chip);
var delChip = document.getElementById(chip);
delChip.parentNode.removeChild(delChip);
}
</script>
<h2>Color Chips</h2>
<ion-chip color="primary">
<ion-label>Primary</ion-label>
</ion-chip>
<ion-chip color="danger">
<ion-label>Danger</ion-label>
</ion-chip>
<ion-chip color="tertiary">
<ion-icon name="checkmark-circle"></ion-icon>
<ion-label>Tertiary with Icon</ion-label>
</ion-chip>
<ion-chip color="primary">
<ion-avatar>
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"/>
</ion-avatar>
<ion-label>Primary with Avatar</ion-label>
</ion-chip>
<ion-chip color="success">
<ion-label>Success with Icon</ion-label>
<ion-icon name="calendar"></ion-icon>
</ion-chip>
<h2>Outline Chips</h2>
<ion-chip outline>
<ion-label>Outline</ion-label>
</ion-chip>
<ion-chip outline color="danger">
<ion-label>Danger Outline</ion-label>
</ion-chip>
<ion-chip outline color="secondary">
<ion-icon name="checkmark-circle"></ion-icon>
<ion-label>Secondary Outline with Icon</ion-label>
</ion-chip>
<ion-chip outline color="primary">
<ion-label>Primary Outline with Avatar</ion-label>
<ion-avatar>
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"/>
</ion-avatar>
</ion-chip>
<ion-chip outline>
<ion-icon name="git-pull-request"></ion-icon>
<ion-label>Outline with Icon and Avatar</ion-label>
<ion-icon name="close-circle"></ion-icon>
</ion-chip>
</ion-content>
</ion-app>
</body>

131
core/src/components/chip/test/preview/index.html
View File

@ -20,108 +20,77 @@
</ion-header>
<ion-content id="content" padding text-center fullscreen>
<h2>Text Chips</h2>
<h2>Basic Chips</h2>
<ion-chip>
<ion-label>Default</ion-label>
</ion-chip>
<ion-chip>
<ion-label color="secondary">Secondary Label</ion-label>
<ion-chip style="border-radius: 4px;">
<ion-label>Border Radius</ion-label>
</ion-chip>
<ion-chip>
<ion-label>Another With Longer Text</ion-label>
<ion-icon name="checkmark-circle"></ion-icon>
<ion-label>With Icon</ion-label>
</ion-chip>
<ion-chip>
<ion-avatar>
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"/>
</ion-avatar>
<ion-label>With Avatar</ion-label>
</ion-chip>
<ion-chip>
<ion-avatar>
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"/>
</ion-avatar>
<ion-label>With Icon and Avatar</ion-label>
<ion-icon name="close-circle"></ion-icon>
</ion-chip>
<h2>Color Chips</h2>
<ion-chip color="primary">
<ion-chip-icon name="heart" color="dark"></ion-chip-icon>
<ion-label>Primary</ion-label>
</ion-chip>
<ion-chip color="secondary">
<ion-label color="dark">Secondary w/ Dark label</ion-label>
</ion-chip>
<ion-chip color="danger">
<ion-label>Danger</ion-label>
</ion-chip>
<h2>Icon Chips</h2>
<ion-chip>
<ion-chip-icon name="pin"></ion-chip-icon>
<ion-label>Default</ion-label>
<ion-chip color="tertiary">
<ion-icon name="checkmark-circle"></ion-icon>
<ion-label>Tertiary with Icon</ion-label>
</ion-chip>
<ion-chip>
<ion-label>Secondary</ion-label>
<ion-chip-icon name="pin" color="secondary"></ion-chip-icon>
</ion-chip>
<h2>Avatar Chips</h2>
<ion-chip>
<ion-chip color="primary">
<ion-avatar>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"/>
</ion-avatar>
<ion-label>Default</ion-label>
<ion-label>Primary with Avatar</ion-label>
</ion-chip>
<ion-chip color="success">
<ion-label>Success with Icon</ion-label>
<ion-icon name="calendar"></ion-icon>
</ion-chip>
<ion-chip>
<ion-label>Right Avatar</ion-label>
<h2>Outline Chips</h2>
<ion-chip outline>
<ion-label>Outline</ion-label>
</ion-chip>
<ion-chip outline color="danger">
<ion-label>Danger Outline</ion-label>
</ion-chip>
<ion-chip outline color="secondary">
<ion-icon name="checkmark-circle"></ion-icon>
<ion-label>Secondary Outline with Icon</ion-label>
</ion-chip>
<ion-chip outline color="primary">
<ion-label>Primary Outline with Avatar</ion-label>
<ion-avatar>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"/>
</ion-avatar>
</ion-chip>
<h2>Delete Chips</h2>
<ion-chip id="chip1">
<ion-label>Default</ion-label>
<ion-chip-button fill="clear" onclick="del('chip1')" class="my-custom-chip">
<ion-icon name="close-circle"></ion-icon>
</ion-chip-button>
<ion-chip outline>
<ion-icon name="git-pull-request"></ion-icon>
<ion-label>Outline with Icon and Avatar</ion-label>
<ion-icon name="close-circle"></ion-icon>
</ion-chip>
<ion-chip id="chip2">
<ion-chip-icon name="pin"></ion-chip-icon>
<ion-label>With Icon</ion-label>
<ion-chip-button onclick="del('chip2')">
<ion-icon name="close"></ion-icon>
</ion-chip-button>
</ion-chip>
<ion-chip id="chip3">
<ion-avatar>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</ion-avatar>
<ion-label>With Avatar</ion-label>
<ion-chip-button fill="clear" color="dark" onclick="del('chip3')">
<ion-icon name="close-circle"></ion-icon>
</ion-chip-button>
</ion-chip>
<ion-chip color="primary" id="chip4">
<ion-chip-icon name="pin"></ion-chip-icon>
<ion-label>Primary</ion-label>
<ion-chip-button onclick="del('chip4')">
<ion-icon name="close-circle"></ion-icon>
</ion-chip-button>
</ion-chip>
<ion-item>
<ion-label>Chip Item</ion-label>
<ion-chip slot="end" id="chip5">
<ion-chip-icon name="pin" color="primary"></ion-chip-icon>
<ion-label>Default</ion-label>
<ion-chip-button fill="clear" color="light" onclick="del('chip5')">
<ion-icon name="close-circle"></ion-icon>
</ion-chip-button>
</ion-chip>
</ion-item>
</ion-content>
<style>
@ -129,14 +98,6 @@
--background: white;
}
</style>
<script>
function del(chip) {
console.log('called del', chip);
var delChip = document.getElementById(chip);
delChip.parentNode.removeChild(delChip);
}
</script>
</ion-app>
</body>

196
core/src/components/chip/test/standalone/index.html
View File

@ -9,180 +9,76 @@
<script src="../../../../../dist/ionic.js"></script>
</head>
<body>
<h2>Text Chips</h2>
<h2>Basic Chips</h2>
<ion-chip>
<ion-label>Default</ion-label>
</ion-chip>
<ion-chip>
<ion-label color="secondary">Secondary Label</ion-label>
<ion-chip style="border-radius: 4px;">
<ion-label>Border Radius</ion-label>
</ion-chip>
<ion-chip>
<ion-label>Another With Longer Text</ion-label>
<ion-icon name="checkmark-circle"></ion-icon>
<ion-label>With Icon</ion-label>
</ion-chip>
<ion-chip>
<ion-avatar>
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"/>
</ion-avatar>
<ion-label>With Avatar</ion-label>
</ion-chip>
<ion-chip>
<ion-avatar>
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"/>
</ion-avatar>
<ion-label>With Icon and Avatar</ion-label>
<ion-icon name="close-circle"></ion-icon>
</ion-chip>
<h2>Color Chips</h2>
<ion-chip color="primary">
<ion-chip-icon name="heart" color="dark"></ion-chip-icon>
<ion-label>Primary</ion-label>
</ion-chip>
<ion-chip color="secondary">
<ion-chip-icon name="heart"></ion-chip-icon>
<ion-label color="dark">Secondary w/ Dark label</ion-label>
</ion-chip>
<ion-chip color="danger">
<ion-label>Danger</ion-label>
</ion-chip>
<h2>Custom Chips</h2>
<ion-chip class="custom-color">
<ion-chip-icon name="heart"></ion-chip-icon>
<ion-label>Custom Color</ion-label>
<ion-chip color="tertiary">
<ion-icon name="checkmark-circle"></ion-icon>
<ion-label>Tertiary with Icon</ion-label>
</ion-chip>
<ion-chip class="custom-avatar">
<ion-chip color="primary">
<ion-avatar>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"/>
</ion-avatar>
<ion-label>Custom Avatar</ion-label>
<ion-label>Primary with Avatar</ion-label>
</ion-chip>
<ion-chip color="success">
<ion-label>Success with Icon</ion-label>
<ion-icon name="calendar"></ion-icon>
</ion-chip>
<ion-chip class="custom-height custom-avatar">
<h2>Outline Chips</h2>
<ion-chip outline>
<ion-label>Outline</ion-label>
</ion-chip>
<ion-chip outline color="danger">
<ion-label>Danger Outline</ion-label>
</ion-chip>
<ion-chip outline color="secondary">
<ion-icon name="checkmark-circle"></ion-icon>
<ion-label>Secondary Outline with Icon</ion-label>
</ion-chip>
<ion-chip outline color="primary">
<ion-label>Primary Outline with Avatar</ion-label>
<ion-avatar>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</ion-avatar>
<ion-label>Custom Height</ion-label>
<ion-chip-icon name="pin" class="custom-icon"></ion-chip-icon>
</ion-chip>
<ion-chip class="custom-height custom-avatar custom-color">
<ion-chip-icon class="custom-icon" name="pin"></ion-chip-icon>
<ion-label>Custom Everything</ion-label>
<ion-chip-button fill="solid" class="custom-button">
<ion-icon name="close-circle"></ion-icon>
</ion-chip-button>
</ion-chip>
<h2>Icon Chips</h2>
<ion-chip>
<ion-chip-icon name="pin"></ion-chip-icon>
<ion-label>Default</ion-label>
</ion-chip>
<ion-chip>
<ion-label>Secondary</ion-label>
<ion-chip-icon name="pin" color="secondary"></ion-chip-icon>
</ion-chip>
<h2>Avatar Chips</h2>
<ion-chip>
<ion-avatar>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</ion-avatar>
<ion-label>Default</ion-label>
</ion-chip>
<ion-chip>
<ion-label>Right Avatar</ion-label>
<ion-avatar>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"/>
</ion-avatar>
</ion-chip>
<h2>Delete Chips</h2>
<ion-chip id="chip1">
<ion-label>Default</ion-label>
<ion-chip-button fill="clear" onclick="del('chip1')" class="my-custom-chip">
<ion-icon name="close-circle"></ion-icon>
</ion-chip-button>
<ion-chip outline>
<ion-icon name="git-pull-request"></ion-icon>
<ion-label>Outline with Icon and Avatar</ion-label>
<ion-icon name="close-circle"></ion-icon>
</ion-chip>
<ion-chip id="chip2">
<ion-chip-icon name="pin"></ion-chip-icon>
<ion-label>With Icon</ion-label>
<ion-chip-button onclick="del('chip2')">
<ion-icon name="close"></ion-icon>
</ion-chip-button>
</ion-chip>
<ion-chip id="chip3">
<ion-avatar>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</ion-avatar>
<ion-label>With Avatar</ion-label>
<ion-chip-button fill="clear" color="dark" onclick="del('chip3')">
<ion-icon name="close-circle"></ion-icon>
</ion-chip-button>
</ion-chip>
<ion-chip color="primary" id="chip4">
<ion-chip-icon name="pin"></ion-chip-icon>
<ion-label>Primary</ion-label>
<ion-chip-button onclick="del('chip4')">
<ion-icon name="close-circle"></ion-icon>
</ion-chip-button>
</ion-chip>
<ion-item>
<ion-label>Chip Item</ion-label>
<ion-chip slot="end" id="chip5">
<ion-chip-icon name="pin" color="primary"></ion-chip-icon>
<ion-label>Default</ion-label>
<ion-chip-button fill="clear" color="light" onclick="del('chip5')">
<ion-icon name="close-circle"></ion-icon>
</ion-chip-button>
</ion-chip>
</ion-item>
<style>
body {
margin: 0;
padding: 16px;
text-align: center;
}
.custom-color {
--background: yellow;
--color: orange;
}
.custom-avatar {
--avatar-width: 41px;
--avatar-height: 41px;
}
.custom-height {
margin-top: 10px;
height: 50px;
border-radius: 25px;
}
.custom-height ion-chip-button {
--width: 50px;
}
.custom-icon {
width: 50px;
height: 50px;
font-size: 30px;
}
</style>
<script>
function del(chip) {
console.log('called del', chip);
var delChip = document.getElementById(chip);
delChip.parentNode.removeChild(delChip);
}
</script>
</body>
</html>

12
core/src/components/chip/usage/angular.md
View File

@ -23,17 +23,13 @@
<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-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-chip-button>
<ion-icon name="close"></ion-icon>
</ion-chip-button>
<ion-icon name="close"></ion-icon>
</ion-chip>
<ion-chip>
@ -41,8 +37,6 @@
<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-icon name="close-circle"></ion-icon>
</ion-chip>
```

12
core/src/components/chip/usage/javascript.md
View File

@ -23,17 +23,13 @@
<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-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-chip-button>
<ion-icon name="close"></ion-icon>
</ion-chip-button>
<ion-icon name="close"></ion-icon>
</ion-chip>
<ion-chip>
@ -41,8 +37,6 @@
<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-icon name="close-circle"></ion-icon>
</ion-chip>
```

2
core/stencil.config.ts
View File

@ -14,7 +14,7 @@ export const config: Config = {
{ components: ['ion-button', 'ion-icon'] },
{ components: ['ion-card', 'ion-card-content', 'ion-card-header', 'ion-card-title', 'ion-card-subtitle'] },
{ components: ['ion-checkbox'] },
{ components: ['ion-chip', 'ion-chip-button', 'ion-chip-icon'] },
{ components: ['ion-chip'] },
{ components: ['ion-datetime', 'ion-picker', 'ion-picker-column', 'ion-picker-controller'] },
{ components: ['ion-fab', 'ion-fab-button', 'ion-fab-list'] },
{ components: ['ion-grid', 'ion-row', 'ion-col'] },