mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-10 00:27:41 +08:00
chore(packages): move the packages to root
This commit is contained in:
Brandy Carney
51
core/src/components/chip-button/chip-button.ios.scss
Normal file
51
core/src/components/chip-button/chip-button.ios.scss
Normal file
@ -0,0 +1,51 @@
|
||||
@import "./chip-button";
|
||||
@import "./chip-button.ios.vars";
|
||||
|
||||
// iOS Chip Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.chip-button-ios {
|
||||
color: $chip-button-ios-text-color;
|
||||
background-color: $chip-button-ios-background-color;
|
||||
}
|
||||
|
||||
|
||||
// iOS Clear Chip Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.chip-button-clear-ios {
|
||||
color: $chip-button-ios-clear-text-color;
|
||||
background-color: $chip-button-ios-clear-background-color;
|
||||
}
|
||||
|
||||
|
||||
// Generate iOS Chip Button Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-value in $colors-ios {
|
||||
$color-base: ion-color($colors-ios, $color-name, base, ios);
|
||||
$color-contrast: ion-color($colors-ios, $color-name, contrast, ios);
|
||||
|
||||
.chip-button-ios-#{$color-name} {
|
||||
color: $color-contrast;
|
||||
background-color: $color-base;
|
||||
}
|
||||
|
||||
.chip-ios-#{$color-name} .chip-button-ios {
|
||||
color: $color-base;
|
||||
background-color: $color-contrast;
|
||||
}
|
||||
|
||||
// Clear Chip Buttons
|
||||
// --------------------------------------------------
|
||||
|
||||
.chip-button-clear-ios-#{$color-name} {
|
||||
color: $color-base;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.chip-ios-#{$color-name} .chip-button-clear-ios {
|
||||
color: $color-contrast;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
19
core/src/components/chip-button/chip-button.ios.vars.scss
Normal file
19
core/src/components/chip-button/chip-button.ios.vars.scss
Normal file
@ -0,0 +1,19 @@
|
||||
@import "../../themes/ionic.globals.ios";
|
||||
|
||||
// iOS Chip Button
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Background color of the chip button
|
||||
$chip-button-ios-background-color: ion-color($colors-ios, primary, base, ios) !default;
|
||||
|
||||
/// @prop - Text color of the chip button
|
||||
$chip-button-ios-text-color: ion-color($colors-ios, $chip-button-ios-background-color, contrast, ios) !default;
|
||||
|
||||
/// @prop - Background color of the clear chip button
|
||||
$chip-button-ios-clear-background-color: transparent !default;
|
||||
|
||||
/// @prop - Text color of the clear chip button
|
||||
$chip-button-ios-clear-text-color: ion-color($colors-ios, primary, base, ios) !default;
|
||||
|
||||
/// @prop - Fill color of the icon in the clear chip button
|
||||
$chip-button-ios-clear-icon-fill-color: ion-color($colors-ios, primary, base, ios) !default;
|
||||
51
core/src/components/chip-button/chip-button.md.scss
Normal file
51
core/src/components/chip-button/chip-button.md.scss
Normal file
@ -0,0 +1,51 @@
|
||||
@import "./chip-button";
|
||||
@import "./chip-button.md.vars";
|
||||
|
||||
// Material Design Chip Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.chip-button-md {
|
||||
color: $chip-button-md-text-color;
|
||||
background-color: $chip-button-md-background-color;
|
||||
}
|
||||
|
||||
|
||||
// Material Design Clear Chip Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.chip-button-clear-md {
|
||||
color: $chip-button-md-clear-text-color;
|
||||
background-color: $chip-button-md-clear-background-color;
|
||||
}
|
||||
|
||||
|
||||
// Generate Material Design Chip Button Colors
|
||||
// --------------------------------------------------
|
||||
|
||||
@each $color-name, $color-value in $colors-md {
|
||||
$color-base: ion-color($colors-md, $color-name, base, md);
|
||||
$color-contrast: ion-color($colors-md, $color-name, contrast, md);
|
||||
|
||||
.chip-button-md-#{$color-name} {
|
||||
color: $color-contrast;
|
||||
background-color: $color-base;
|
||||
}
|
||||
|
||||
.chip-md-#{$color-name} .chip-button-md {
|
||||
color: $color-base;
|
||||
background-color: $color-contrast;
|
||||
}
|
||||
|
||||
// Clear Chip Buttons
|
||||
// --------------------------------------------------
|
||||
|
||||
.chip-button-clear-md-#{$color-name} {
|
||||
color: $color-base;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.chip-md-#{$color-name} .chip-button-clear-md {
|
||||
color: $color-contrast;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
19
core/src/components/chip-button/chip-button.md.vars.scss
Normal file
19
core/src/components/chip-button/chip-button.md.vars.scss
Normal file
@ -0,0 +1,19 @@
|
||||
@import "../../themes/ionic.globals.md";
|
||||
|
||||
// Material Design Chip Button
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @prop - Background color of the chip button
|
||||
$chip-button-md-background-color: ion-color($colors-md, primary, base, md) !default;
|
||||
|
||||
/// @prop - Text color of the chip button
|
||||
$chip-button-md-text-color: ion-color($colors-md, $chip-button-md-background-color, contrast, md) !default;
|
||||
|
||||
/// @prop - Background color of the clear chip button
|
||||
$chip-button-md-clear-background-color: transparent !default;
|
||||
|
||||
/// @prop - Text color of the clear chip button
|
||||
$chip-button-md-clear-text-color: ion-color($colors-md, primary, base, md) !default;
|
||||
|
||||
/// @prop - Fill color of the icon in the clear chip button
|
||||
$chip-button-md-clear-icon-fill-color: ion-color($colors-md, primary, base, md) !default;
|
||||
33
core/src/components/chip-button/chip-button.scss
Normal file
33
core/src/components/chip-button/chip-button.scss
Normal file
@ -0,0 +1,33 @@
|
||||
@import "./chip-button.vars";
|
||||
|
||||
// Chip Button
|
||||
// --------------------------------------------------
|
||||
|
||||
.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);
|
||||
|
||||
position: relative;
|
||||
|
||||
width: $chip-button-size;
|
||||
height: $chip-button-size;
|
||||
|
||||
border: 0;
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.chip-button-inner {
|
||||
display: flex;
|
||||
|
||||
flex-flow: row nowrap;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
91
core/src/components/chip-button/chip-button.tsx
Normal file
91
core/src/components/chip-button/chip-button.tsx
Normal file
@ -0,0 +1,91 @@
|
||||
import { Component, Element, Prop } from '@stencil/core';
|
||||
import { CssClassMap } from '../../index';
|
||||
import { getButtonClassMap, getElementClassMap } from '../../utils/theme';
|
||||
|
||||
@Component({
|
||||
tag: 'ion-chip-button',
|
||||
styleUrls: {
|
||||
ios: 'chip-button.ios.scss',
|
||||
md: 'chip-button.md.scss'
|
||||
},
|
||||
})
|
||||
export class ChipButton {
|
||||
@Element() private el: HTMLElement;
|
||||
|
||||
/**
|
||||
* The color to use.
|
||||
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
|
||||
*/
|
||||
@Prop() color: string;
|
||||
|
||||
/**
|
||||
* The mode determines which platform styles to use.
|
||||
* Possible values are: `"ios"` or `"md"`.
|
||||
*/
|
||||
@Prop() mode: 'ios' | 'md';
|
||||
|
||||
/**
|
||||
* If true, the user cannot interact with the chip button. Defaults to `false`.
|
||||
*/
|
||||
@Prop() disabled = false;
|
||||
|
||||
/**
|
||||
* Set to `"clear"` for a transparent button style.
|
||||
*/
|
||||
@Prop() fill: string;
|
||||
|
||||
/**
|
||||
* 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;
|
||||
|
||||
/**
|
||||
* Get the classes for the style
|
||||
* Chip buttons can only be clear or default (solid)
|
||||
*/
|
||||
private getStyleClassMap(buttonType: string): CssClassMap {
|
||||
return getColorClassMap(this.color, buttonType, this.fill || 'default', this.mode);
|
||||
}
|
||||
|
||||
render() {
|
||||
const buttonType = 'chip-button';
|
||||
|
||||
const hostClasses = getElementClassMap(this.el.classList);
|
||||
const TagType = this.href ? 'a' : 'button';
|
||||
|
||||
const buttonClasses = {
|
||||
...hostClasses,
|
||||
...getButtonClassMap(buttonType, this.mode),
|
||||
...this.getStyleClassMap(buttonType),
|
||||
};
|
||||
|
||||
return (
|
||||
<TagType
|
||||
class={buttonClasses}
|
||||
disabled={this.disabled}
|
||||
href={this.href}>
|
||||
<span class='chip-button-inner'>
|
||||
<slot></slot>
|
||||
</span>
|
||||
{ this.mode === 'md' && <ion-ripple-effect/> }
|
||||
</TagType>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the classes for the color
|
||||
*/
|
||||
function getColorClassMap(color: string, buttonType: string, style: string, mode: string): CssClassMap {
|
||||
const className = (style === 'default') ? `${buttonType}` : `${buttonType}-${style}`;
|
||||
|
||||
const map: CssClassMap = {
|
||||
[className]: true,
|
||||
[`${className}-${mode}`]: true
|
||||
};
|
||||
if (color) {
|
||||
map[`${className}-${mode}-${color}`] = true;
|
||||
}
|
||||
return map;
|
||||
}
|
||||
22
core/src/components/chip-button/chip-button.vars.scss
Normal file
22
core/src/components/chip-button/chip-button.vars.scss
Normal file
@ -0,0 +1,22 @@
|
||||
@import "../../themes/ionic.globals";
|
||||
|
||||
// Chip Button
|
||||
// --------------------------------------------------
|
||||
|
||||
/// @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;
|
||||
122
core/src/components/chip-button/readme.md
Normal file
122
core/src/components/chip-button/readme.md
Normal file
@ -0,0 +1,122 @@
|
||||
# ion-chip-button
|
||||
|
||||
|
||||
A chip-button is an inset button that is placed inside of a chip.
|
||||
|
||||
|
||||
```html
|
||||
|
||||
<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>
|
||||
```
|
||||
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
|
||||
## Properties
|
||||
|
||||
#### color
|
||||
|
||||
string
|
||||
|
||||
The color to use.
|
||||
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
|
||||
|
||||
|
||||
#### disabled
|
||||
|
||||
boolean
|
||||
|
||||
If true, the user cannot interact with the chip button. Defaults to `false`.
|
||||
|
||||
|
||||
#### fill
|
||||
|
||||
string
|
||||
|
||||
Set to `"clear"` for a transparent button style.
|
||||
|
||||
|
||||
#### href
|
||||
|
||||
string
|
||||
|
||||
Contains a URL or a URL fragment that the hyperlink points to.
|
||||
If this property is set, an anchor tag will be rendered.
|
||||
|
||||
|
||||
#### 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"`.
|
||||
|
||||
|
||||
#### disabled
|
||||
|
||||
boolean
|
||||
|
||||
If true, the user cannot interact with the chip button. Defaults to `false`.
|
||||
|
||||
|
||||
#### fill
|
||||
|
||||
string
|
||||
|
||||
Set to `"clear"` for a transparent button style.
|
||||
|
||||
|
||||
#### href
|
||||
|
||||
string
|
||||
|
||||
Contains a URL or a URL fragment that the hyperlink points to.
|
||||
If this property is set, an anchor tag will be rendered.
|
||||
|
||||
|
||||
#### mode
|
||||
|
||||
|
||||
|
||||
The mode determines which platform styles to use.
|
||||
Possible values are: `"ios"` or `"md"`.
|
||||
|
||||
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
*Built with [StencilJS](https://stenciljs.com/)*
|
||||
Reference in New Issue
Block a user