mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 03:00:58 +08:00
feat(chip): add chip and chip button component
This commit is contained in:
Brandy Carney
106
packages/core/src/components/chip-button/chip-button.tsx
Normal file
106
packages/core/src/components/chip-button/chip-button.tsx
Normal file
@ -0,0 +1,106 @@
|
||||
import { Component, CssClassObject, h, Prop } from '@stencil/core';
|
||||
|
||||
|
||||
@Component({
|
||||
tag: 'ion-chip-button'
|
||||
})
|
||||
export class ChipButton {
|
||||
$el: HTMLElement;
|
||||
mode: string;
|
||||
color: string;
|
||||
|
||||
@Prop() href: string;
|
||||
|
||||
/**
|
||||
* @Prop {boolean} If true, activates a transparent button style.
|
||||
*/
|
||||
@Prop() clear: boolean = false;
|
||||
|
||||
/**
|
||||
* @Prop {boolean} If true, sets the button into a disabled state.
|
||||
*/
|
||||
@Prop() disabled: boolean = false;
|
||||
|
||||
/**
|
||||
* @hidden
|
||||
* Get the classes based on the button type
|
||||
* e.g. alert-button, action-sheet-button
|
||||
*/
|
||||
getButtonClassList(buttonType: string, mode: string): string[] {
|
||||
if (!buttonType) {
|
||||
return [];
|
||||
}
|
||||
return [
|
||||
buttonType,
|
||||
`${buttonType}-${mode}`
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* @hidden
|
||||
* Get the classes for the color
|
||||
*/
|
||||
getColorClassList(color: string, buttonType: string, style: string, mode: string): string[] {
|
||||
let className = (style === 'default') ? `${buttonType}` : `${buttonType}-${style}`;
|
||||
|
||||
return [`${className}-${mode}`].concat(
|
||||
style !== 'default' ? `${className}` : [],
|
||||
color ? `${className}-${mode}-${color}` : []
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* @hidden
|
||||
* Get the classes for the style
|
||||
* Chip buttons can only be clear or default (solid)
|
||||
*/
|
||||
getStyleClassList(buttonType: string): string[] {
|
||||
let classList = [].concat(
|
||||
this.clear ? this.getColorClassList(this.color, buttonType, 'clear', this.mode) : []
|
||||
);
|
||||
|
||||
if (classList.length === 0) {
|
||||
classList = this.getColorClassList(this.color, buttonType, 'default', this.mode);
|
||||
}
|
||||
|
||||
return classList;
|
||||
}
|
||||
|
||||
/**
|
||||
* @hidden
|
||||
* Get the element classes to add to the child element
|
||||
*/
|
||||
getElementClassList() {
|
||||
let classList = [].concat(
|
||||
this.$el.className.length ? this.$el.className.split(' ') : []
|
||||
);
|
||||
|
||||
return classList;
|
||||
}
|
||||
|
||||
render() {
|
||||
const buttonType = 'chip-button';
|
||||
|
||||
var buttonClasses: CssClassObject = []
|
||||
.concat(
|
||||
this.getButtonClassList(buttonType, this.mode),
|
||||
this.getElementClassList(),
|
||||
this.getStyleClassList(buttonType)
|
||||
)
|
||||
.reduce((prevValue, cssClass) => {
|
||||
prevValue[cssClass] = true;
|
||||
return prevValue;
|
||||
}, {});
|
||||
|
||||
const TagType = this.href ? 'a' : 'button';
|
||||
|
||||
return (
|
||||
<TagType class={buttonClasses} disabled={this.disabled}>
|
||||
<span class='button-inner'>
|
||||
<slot></slot>
|
||||
</span>
|
||||
<div class='button-effect'></div>
|
||||
</TagType>
|
||||
);
|
||||
}
|
||||
}
|
||||
142
packages/core/src/components/chip/chip.ios.scss
Normal file
142
packages/core/src/components/chip/chip.ios.scss
Normal file
@ -0,0 +1,142 @@
|
||||
@import "../../themes/ionic.globals.ios";
|
||||
@import "./chip";
|
||||
|
||||
// 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: rgba(0, 0, 0, .87) !default;
|
||||
|
||||
/// @prop - Background color of the chip
|
||||
$chip-ios-background-color: rgba(0, 0, 0, .12) !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 - Background color of the icon in the chip
|
||||
$chip-ios-icon-background-color: color($colors-ios, primary) !default;
|
||||
|
||||
/// @prop - Fill color of the icon in the chip
|
||||
$chip-ios-icon-fill-color: color-contrast($colors-ios, $chip-ios-icon-background-color) !default;
|
||||
|
||||
/// @prop - Background color of the chip button
|
||||
$chip-ios-button-background-color: color($colors-ios, primary) !default;
|
||||
|
||||
/// @prop - Fill color of the icon in the chip button
|
||||
$chip-ios-button-icon-fill-color: color-contrast($colors-ios, $chip-ios-button-background-color) !default;
|
||||
|
||||
/// @prop - Background color of the clear chip button
|
||||
$chip-ios-button-clear-background-color: transparent !default;
|
||||
|
||||
/// @prop - Text color of the clear chip button
|
||||
$chip-ios-button-clear-text-color: color($colors-ios, primary) !default;
|
||||
|
||||
/// @prop - Fill color of the icon in the clear chip button
|
||||
$chip-ios-button-clear-icon-fill-color: color($colors-ios, primary) !default;
|
||||
|
||||
|
||||
.chip-ios {
|
||||
@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;
|
||||
line-height: $chip-ios-height;
|
||||
color: $chip-ios-text-color;
|
||||
background: $chip-ios-background-color;
|
||||
}
|
||||
|
||||
.chip-ios > ion-label {
|
||||
@include margin($chip-ios-label-margin-top, $chip-ios-label-margin-end, $chip-ios-label-margin-bottom, $chip-ios-label-margin-start);
|
||||
}
|
||||
|
||||
.chip-ios > ion-icon {
|
||||
fill: $chip-ios-icon-fill-color;
|
||||
background-color: $chip-ios-icon-background-color;
|
||||
}
|
||||
|
||||
// iOS Chip Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.chip-button-ios {
|
||||
background-color: $chip-ios-button-background-color;
|
||||
}
|
||||
|
||||
.chip-button-ios .icon {
|
||||
fill: $chip-ios-button-icon-fill-color;
|
||||
}
|
||||
|
||||
|
||||
// iOS Clear Chip Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.chip-button-clear-ios {
|
||||
background-color: $chip-ios-button-clear-background-color;
|
||||
color: $chip-ios-button-clear-text-color;
|
||||
}
|
||||
|
||||
.chip-button-clear-ios .icon {
|
||||
fill: $chip-ios-button-clear-icon-fill-color;
|
||||
}
|
||||
|
||||
|
||||
// Generate iOS Chip Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
|
||||
|
||||
.chip-ios-#{$color-name},
|
||||
.chip-button-ios-#{$color-name} {
|
||||
color: $color-contrast;
|
||||
background-color: $color-base;
|
||||
}
|
||||
|
||||
.chip-button-ios-#{$color-name} .icon {
|
||||
fill: $color-contrast;
|
||||
}
|
||||
|
||||
.chip-ios .icon-ios-#{$color-name} {
|
||||
fill: $color-contrast;
|
||||
background-color: $color-base;
|
||||
}
|
||||
|
||||
.chip-button-clear-ios-#{$color-name} {
|
||||
color: $color-base;
|
||||
}
|
||||
|
||||
.chip-button-clear-ios-#{$color-name} .icon {
|
||||
fill: $color-base;
|
||||
}
|
||||
|
||||
}
|
||||
144
packages/core/src/components/chip/chip.md.scss
Normal file
144
packages/core/src/components/chip/chip.md.scss
Normal file
@ -0,0 +1,144 @@
|
||||
@import "../../themes/ionic.globals.md";
|
||||
@import "./chip";
|
||||
|
||||
// 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: rgba(0, 0, 0, .87) !default;
|
||||
|
||||
/// @prop - Background color of the chip
|
||||
$chip-md-background-color: rgba(0, 0, 0, .12) !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 - Background color of the icon in the chip
|
||||
$chip-md-icon-background-color: color($colors-md, primary) !default;
|
||||
|
||||
/// @prop - Fill color of the icon in the chip
|
||||
$chip-md-icon-fill-color: color-contrast($colors-md, $chip-md-icon-background-color) !default;
|
||||
|
||||
/// @prop - Background color of the chip button
|
||||
$chip-md-button-background-color: color($colors-md, primary) !default;
|
||||
|
||||
/// @prop - Fill color of the icon in the chip button
|
||||
$chip-md-button-icon-fill-color: color-contrast($colors-md, $chip-md-button-background-color) !default;
|
||||
|
||||
/// @prop - Background color of the clear chip button
|
||||
$chip-md-button-clear-background-color: transparent !default;
|
||||
|
||||
/// @prop - Text color of the clear chip button
|
||||
$chip-md-button-clear-text-color: color($colors-md, primary) !default;
|
||||
|
||||
/// @prop - Fill color of the icon in the clear chip button
|
||||
$chip-md-button-clear-icon-fill-color: color($colors-md, primary) !default;
|
||||
|
||||
|
||||
.chip-md {
|
||||
@include border-radius($chip-md-border-radius);
|
||||
|
||||
height: $chip-md-height;
|
||||
|
||||
font-size: $chip-md-font-size;
|
||||
line-height: $chip-md-height;
|
||||
color: $chip-md-text-color;
|
||||
background: $chip-md-background-color;
|
||||
|
||||
@include margin($chip-md-margin-top, $chip-md-margin-end, $chip-md-margin-bottom, $chip-md-margin-start);
|
||||
}
|
||||
|
||||
.chip-md > ion-label {
|
||||
@include margin($chip-md-label-margin-top, $chip-md-label-margin-end, $chip-md-label-margin-bottom, $chip-md-label-margin-start);
|
||||
}
|
||||
|
||||
.chip-md > ion-icon {
|
||||
fill: $chip-md-icon-fill-color;
|
||||
background-color: $chip-md-icon-background-color;
|
||||
}
|
||||
|
||||
|
||||
// Material Design Chip Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.chip-button-md {
|
||||
background-color: $chip-md-button-background-color;
|
||||
}
|
||||
|
||||
.chip-button-md .icon {
|
||||
fill: $chip-md-button-icon-fill-color;
|
||||
}
|
||||
|
||||
|
||||
// Material Design Clear Chip Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.chip-button-clear-md {
|
||||
background-color: $chip-md-button-clear-background-color;
|
||||
color: $chip-md-button-clear-text-color;
|
||||
}
|
||||
|
||||
.chip-button-clear-md .icon {
|
||||
fill: $chip-md-button-clear-icon-fill-color;
|
||||
}
|
||||
|
||||
|
||||
// Generate Material Design Chip Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
|
||||
|
||||
.chip-md-#{$color-name},
|
||||
.chip-button-md-#{$color-name} {
|
||||
color: $color-contrast;
|
||||
background-color: $color-base;
|
||||
}
|
||||
|
||||
.chip-button-md-#{$color-name} .icon {
|
||||
fill: $color-contrast;
|
||||
}
|
||||
|
||||
.chip-md .icon-md-#{$color-name} {
|
||||
fill: $color-contrast;
|
||||
background-color: $color-base;
|
||||
}
|
||||
|
||||
.chip-button-clear-md-#{$color-name} {
|
||||
color: $color-base;
|
||||
}
|
||||
|
||||
.chip-button-clear-md-#{$color-name} .icon {
|
||||
fill: $color-base;
|
||||
}
|
||||
|
||||
}
|
||||
94
packages/core/src/components/chip/chip.scss
Normal file
94
packages/core/src/components/chip/chip.scss
Normal file
@ -0,0 +1,94 @@
|
||||
@import "../../themes/ionic.globals";
|
||||
|
||||
// Chip
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Border radius of the button in the chip
|
||||
$chip-button-border-radius: 50% !default;
|
||||
|
||||
/// @prop - Margin top of the button in the chip
|
||||
$chip-button-margin-top: 0 !default;
|
||||
|
||||
/// @prop - Margin end of the button in the chip
|
||||
$chip-button-margin-end: $chip-button-margin-top !default;
|
||||
|
||||
/// @prop - Margin bottom of the button in the chip
|
||||
$chip-button-margin-bottom: $chip-button-margin-top !default;
|
||||
|
||||
/// @prop - Margin start of the button in the chip
|
||||
$chip-button-margin-start: $chip-button-margin-end !default;
|
||||
|
||||
/// @prop - Width and height of the button in the chip
|
||||
$chip-button-size: 32px !default;
|
||||
|
||||
/// @prop - Border radius of the icon in the chip
|
||||
$chip-icon-border-radius: 50% !default;
|
||||
|
||||
/// @prop - Text alignment of the icon in the chip
|
||||
$chip-icon-text-align: center !default;
|
||||
|
||||
/// @prop - Width and height of the icon in the chip
|
||||
$chip-icon-size: 32px !default;
|
||||
|
||||
/// @prop - Font size of the icon in the chip
|
||||
$chip-icon-font-size: 18px !default;
|
||||
|
||||
/// @prop - Line height of the icon in the chip
|
||||
$chip-icon-line-height: 36px !default;
|
||||
|
||||
/// @prop - Width and height of the avatar in the chip
|
||||
$chip-avatar-size: 32px !default;
|
||||
|
||||
/// @prop - Border radius of the avatar in the chip
|
||||
$chip-avatar-border-radius: 50% !default;
|
||||
|
||||
|
||||
ion-chip {
|
||||
display: inline-flex;
|
||||
|
||||
align-self: center;
|
||||
|
||||
font-weight: normal;
|
||||
vertical-align: middle;
|
||||
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
ion-chip .chip-button {
|
||||
@include border-radius($chip-button-border-radius);
|
||||
@include margin($chip-button-margin-top, $chip-button-margin-end, $chip-button-margin-bottom, $chip-button-margin-start);
|
||||
|
||||
width: $chip-button-size;
|
||||
height: $chip-button-size;
|
||||
}
|
||||
|
||||
ion-chip ion-icon {
|
||||
@include text-align($chip-icon-text-align);
|
||||
@include border-radius($chip-icon-border-radius);
|
||||
|
||||
width: $chip-icon-size;
|
||||
height: $chip-icon-size;
|
||||
|
||||
font-size: $chip-icon-font-size;
|
||||
line-height: $chip-icon-line-height;
|
||||
}
|
||||
|
||||
ion-chip ion-avatar {
|
||||
@include border-radius($chip-avatar-border-radius);
|
||||
|
||||
width: $chip-avatar-size;
|
||||
min-width: $chip-avatar-size;
|
||||
height: $chip-avatar-size;
|
||||
min-height: $chip-avatar-size;
|
||||
}
|
||||
|
||||
ion-chip ion-avatar img {
|
||||
@include border-radius($chip-avatar-border-radius);
|
||||
|
||||
display: block;
|
||||
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
105
packages/core/src/components/chip/chip.tsx
Normal file
105
packages/core/src/components/chip/chip.tsx
Normal file
@ -0,0 +1,105 @@
|
||||
import { Component, h } from '@stencil/core';
|
||||
|
||||
/**
|
||||
* @name Chip
|
||||
* @module ionic
|
||||
* @description
|
||||
* Chips represent complex entities in small blocks, such as a contact.
|
||||
*
|
||||
*
|
||||
* @usage
|
||||
*
|
||||
* ```html
|
||||
* <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="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>
|
||||
* ```
|
||||
*
|
||||
*
|
||||
* @advanced
|
||||
*
|
||||
* ```html
|
||||
* <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>
|
||||
* ```
|
||||
*
|
||||
* ```ts
|
||||
* @Component({
|
||||
* templateUrl: 'main.html'
|
||||
* })
|
||||
* class E2EPage {
|
||||
* delete(chip: Element) {
|
||||
* chip.remove();
|
||||
* }
|
||||
* }
|
||||
* ```
|
||||
*
|
||||
* @demo /docs/demos/src/chip/
|
||||
**/
|
||||
@Component({
|
||||
tag: 'ion-chip',
|
||||
styleUrls: {
|
||||
ios: 'chip.ios.scss',
|
||||
md: 'chip.md.scss',
|
||||
wp: 'chip.wp.scss'
|
||||
},
|
||||
host: {
|
||||
theme: 'chip'
|
||||
}
|
||||
})
|
||||
export class Chip {
|
||||
render() {
|
||||
return <slot></slot>;
|
||||
}
|
||||
}
|
||||
143
packages/core/src/components/chip/chip.wp.scss
Normal file
143
packages/core/src/components/chip/chip.wp.scss
Normal file
@ -0,0 +1,143 @@
|
||||
@import "../../themes/ionic.globals.wp";
|
||||
@import "./chip";
|
||||
|
||||
// Windows Chip
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Margin top of the chip
|
||||
$chip-wp-margin-top: 2px !default;
|
||||
|
||||
/// @prop - Margin end of the chip
|
||||
$chip-wp-margin-end: 0 !default;
|
||||
|
||||
/// @prop - Margin bottom of the chip
|
||||
$chip-wp-margin-bottom: $chip-wp-margin-top !default;
|
||||
|
||||
/// @prop - Margin start of the chip
|
||||
$chip-wp-margin-start: $chip-wp-margin-end !default;
|
||||
|
||||
/// @prop - Height of the chip
|
||||
$chip-wp-height: 32px !default;
|
||||
|
||||
/// @prop - Border radius of the chip
|
||||
$chip-wp-border-radius: 16px !default;
|
||||
|
||||
/// @prop - Font size of the chip
|
||||
$chip-wp-font-size: 13px !default;
|
||||
|
||||
/// @prop - Text color of the chip
|
||||
$chip-wp-text-color: rgba(0, 0, 0, .87) !default;
|
||||
|
||||
/// @prop - Background color of the chip
|
||||
$chip-wp-background-color: rgba(0, 0, 0, .12) !default;
|
||||
|
||||
/// @prop - Margin top of the label in the chip
|
||||
$chip-wp-label-margin-top: 0 !default;
|
||||
|
||||
/// @prop - Margin end of the label in the chip
|
||||
$chip-wp-label-margin-end: 10px !default;
|
||||
|
||||
/// @prop - Margin bottom of the label in the chip
|
||||
$chip-wp-label-margin-bottom: $chip-wp-label-margin-top !default;
|
||||
|
||||
/// @prop - Margin start of the label in the chip
|
||||
$chip-wp-label-margin-start: $chip-wp-label-margin-end !default;
|
||||
|
||||
/// @prop - Background color of the icon in the chip
|
||||
$chip-wp-icon-background-color: color($colors-wp, primary) !default;
|
||||
|
||||
/// @prop - Fill color of the icon in the chip
|
||||
$chip-wp-icon-fill-color: color-contrast($colors-wp, $chip-wp-icon-background-color) !default;
|
||||
|
||||
/// @prop - Background color of the chip button
|
||||
$chip-wp-button-background-color: color($colors-wp, primary) !default;
|
||||
|
||||
/// @prop - Fill color of the icon in the chip button
|
||||
$chip-wp-button-icon-fill-color: color-contrast($colors-wp, $chip-wp-button-background-color) !default;
|
||||
|
||||
/// @prop - Background color of the clear chip button
|
||||
$chip-wp-button-clear-background-color: transparent !default;
|
||||
|
||||
/// @prop - Text color of the clear chip button
|
||||
$chip-wp-button-clear-text-color: color($colors-wp, primary) !default;
|
||||
|
||||
/// @prop - Fill color of the icon in the clear chip button
|
||||
$chip-wp-button-clear-icon-fill-color: color($colors-wp, primary) !default;
|
||||
|
||||
|
||||
.chip-wp {
|
||||
@include border-radius($chip-wp-border-radius);
|
||||
|
||||
height: $chip-wp-height;
|
||||
|
||||
font-size: $chip-wp-font-size;
|
||||
line-height: $chip-wp-height;
|
||||
color: $chip-wp-text-color;
|
||||
background: $chip-wp-background-color;
|
||||
|
||||
@include margin($chip-wp-margin-top, $chip-wp-margin-end, $chip-wp-margin-bottom, $chip-wp-margin-start);
|
||||
}
|
||||
|
||||
.chip-wp > ion-label {
|
||||
@include margin($chip-wp-label-margin-top, $chip-wp-label-margin-end, $chip-wp-label-margin-bottom, $chip-wp-label-margin-start);
|
||||
}
|
||||
|
||||
.chip-wp > ion-icon {
|
||||
fill: $chip-wp-icon-fill-color;
|
||||
background-color: $chip-wp-icon-background-color;
|
||||
}
|
||||
|
||||
|
||||
// Material Design Chip Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.chip-button-wp {
|
||||
background-color: $chip-wp-button-background-color;
|
||||
}
|
||||
|
||||
.chip-button-wp .icon {
|
||||
fill: $chip-wp-button-icon-fill-color;
|
||||
}
|
||||
|
||||
|
||||
// Material Design Clear Chip Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.chip-button-clear-wp {
|
||||
background-color: $chip-wp-button-clear-background-color;
|
||||
color: $chip-wp-button-clear-text-color;
|
||||
}
|
||||
|
||||
.chip-button-clear-wp .icon {
|
||||
fill: $chip-wp-button-clear-icon-fill-color;
|
||||
}
|
||||
|
||||
// Generate Windows Chip Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
|
||||
|
||||
.chip-wp-#{$color-name},
|
||||
.chip-button-wp-#{$color-name} {
|
||||
color: $color-contrast;
|
||||
background-color: $color-base;
|
||||
}
|
||||
|
||||
.chip-button-wp-#{$color-name} .icon {
|
||||
fill: $color-contrast;
|
||||
}
|
||||
|
||||
.chip-wp .icon-wp-#{$color-name} {
|
||||
fill: $color-contrast;
|
||||
background-color: $color-base;
|
||||
}
|
||||
|
||||
.chip-button-clear-wp-#{$color-name} {
|
||||
color: $color-base;
|
||||
}
|
||||
|
||||
.chip-button-clear-wp-#{$color-name} .icon {
|
||||
fill: $color-base;
|
||||
}
|
||||
|
||||
}
|
||||
123
packages/core/src/components/chip/test/basic.html
Normal file
123
packages/core/src/components/chip/test/basic.html
Normal file
@ -0,0 +1,123 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Ionic Chips</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<script src="/dist/ionic.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<ion-app>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Header</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-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-icon name="heart" color="dark"></ion-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-icon name="pin"></ion-icon>
|
||||
<ion-label>Default</ion-label>
|
||||
</ion-chip>
|
||||
|
||||
<ion-chip>
|
||||
<ion-label>Secondary</ion-label>
|
||||
<ion-icon name="pin" color="secondary"></ion-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==">
|
||||
</ion-avatar>
|
||||
</ion-chip>
|
||||
|
||||
<h2>del Chips</h2>
|
||||
|
||||
<ion-chip id="chip1">
|
||||
<ion-label>Default</ion-label>
|
||||
<ion-chip-button clear onclick="del('chip1')">
|
||||
<ion-icon name="close-circle"></ion-icon>
|
||||
</ion-chip-button>
|
||||
</ion-chip>
|
||||
|
||||
<ion-chip id="chip2">
|
||||
<ion-icon name="pin" color="primary"></ion-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 clear color="dark" onclick="del('chip3')">
|
||||
<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="chip4">
|
||||
<ion-icon name="pin" color="primary"></ion-icon>
|
||||
<ion-label>Default</ion-label>
|
||||
<ion-chip-button clear color="light" onclick="del('chip4')">
|
||||
<ion-icon name="close-circle"></ion-icon>
|
||||
</ion-chip-button>
|
||||
</ion-chip>
|
||||
</ion-item>
|
||||
</ion-content>
|
||||
|
||||
<script>
|
||||
function del(chip) {
|
||||
console.log('called del', chip);
|
||||
var delChip = document.getElementById(chip);
|
||||
delChip.parentNode.removeChild(delChip);
|
||||
}
|
||||
</script>
|
||||
</ion-app>
|
||||
</body>
|
||||
</html>
|
||||
@ -8,6 +8,7 @@ exports.config = {
|
||||
{ components: ['ion-avatar', 'ion-badge', 'ion-thumbnail'] },
|
||||
{ components: ['ion-button', 'ion-buttons', 'ion-icon'] },
|
||||
{ components: ['ion-card', 'ion-card-content', 'ion-card-header', 'ion-card-title'] },
|
||||
{ components: ['ion-chip', 'ion-chip-button'] },
|
||||
{ components: ['ion-fab', 'ion-fab-button', 'ion-fab-list'] },
|
||||
{ components: ['ion-gesture', 'ion-scroll'], priority: 'low' },
|
||||
{ components: ['ion-grid', 'ion-row', 'ion-col'] },
|
||||
|
||||
@ -5,6 +5,7 @@ A list of the breaking changes introduced in Ionic Angular v4.
|
||||
|
||||
- [Dynamic Mode](#dynamic-mode)
|
||||
- [Button](#button)
|
||||
- [Chip](#chip)
|
||||
- [FAB](#fab)
|
||||
- [Fixed Content](#fixed-content)
|
||||
- [Icon](#icon)
|
||||
@ -97,6 +98,34 @@ These have been renamed to the following, and moved from the button element to t
|
||||
</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 clear color="light">
|
||||
<ion-icon name="close-circle"></ion-icon>
|
||||
</ion-chip-button>
|
||||
</ion-chip>
|
||||
```
|
||||
|
||||
## FAB
|
||||
|
||||
### Markup Changed
|
||||
|
||||
Reference in New Issue
Block a user