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

fix(back-button): add and document custom properties

Browse Source 
removes use of `--ion-color-*` variables references #14808
documents custom properties references #14850
uses `—background` vars to prevent overriding the color css references
#14853
This commit is contained in:
Brandy Carney
2018-09-24 18:00:46 -04:00
parent f9caace6dd
commit b3aebb843c
6 changed files with 291 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
core/src/components/back-button/back-button.ios.scss
View File

@ -5,39 +5,32 @@
// -------------------------------------------------- // --------------------------------------------------
:host { :host {
--ion-color-base: #{$back-button-ios-color}; --color: #{$back-button-ios-color};
--margin-top: 0;
--margin-end: 0;
--margin-bottom: 0;
--margin-start: 0;
--padding-top: 0;
--padding-end: 0;
--padding-bottom: 0;
--padding-start: 0;
--min-height: 32px;
--icon-padding-top: 0;
--icon-padding-end: 0;
--icon-padding-bottom: 0;
--icon-padding-start: 0;
--icon-margin-top: 0;
--icon-margin-end: -5px;
--icon-margin-bottom: 0;
--icon-margin-start: -4px;
--icon-font-size: 1.85em;
font-size: 17px;
} }
.back-button-native { .back-button-native {
@include padding(0);
@include margin(0);
min-height: 32px;
transform: translateZ(0); transform: translateZ(0);
border: 0;
background-color: transparent;
font-size: 17px;
line-height: 1;
overflow: visible; overflow: visible;
z-index: $back-button-ios-button-z-index; z-index: $back-button-ios-button-z-index;
&.activated {
opacity: .4;
}
}
ion-icon {
@include padding(0);
@include margin(0, -5px, 0, -4px);
display: inherit;
font-size: 1.85em;
pointer-events: none;
} }

46
core/src/components/back-button/back-button.md.scss
View File

@ -5,42 +5,38 @@
// -------------------------------------------------- // --------------------------------------------------
:host { :host {
--ion-color-base: currentColor; --color: #{$back-button-md-color};
} --margin-top: 1px;
--margin-end: 6px;
.back-button-native { --margin-bottom: 0;
@include margin(1px, 6px, 0, 0); --margin-start: 0;
@include padding(0, 5px); --padding-top: 0;
--padding-end: 5px;
min-width: 44px; --padding-bottom: 0;
height: 32px; --padding-start: 5px;
--height: 32px;
border: 0; --min-width: 44px;
--icon-padding-end: .3em;
background-color: transparent; --icon-padding-start: .3em;
--icon-margin-top: 0;
--icon-margin-end: 6px;
--icon-margin-bottom: 0;
--icon-margin-start: 6px;
--icon-font-size: 24px;
--icon-font-weight: normal;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
text-transform: uppercase; text-transform: uppercase;
}
.back-button-native {
box-shadow: none; box-shadow: none;
&.activated {
opacity: .4;
}
} }
ion-icon { ion-icon {
@include padding-horizontal(null, .3em);
@include margin(0);
@include margin(0, 6px);
font-size: 24px;
font-weight: normal;
line-height: .67; line-height: .67;
text-align: start; text-align: start;
pointer-events: none;
} }

104
core/src/components/back-button/back-button.scss
View File

@ -4,10 +4,56 @@
// -------------------------------------------------- // --------------------------------------------------
:host { :host {
/**
* @prop --background: Background of the button
*
* @prop --color: Text color of the button
*
* @prop --width: Width of the button
* @prop --height: Height of the button
*
* @prop --min-width: Minimum width of the button
* @prop --min-height: Minimum height of the button
*
* @prop --transition: Transition of the button
*
* @prop --border-radius: Border radius of the button
*
* @prop --ripple-color: Color of the button ripple effect
*
* @prop --opacity: Opacity of the button
*
* @prop --margin-top: Margin top of the button
* @prop --margin-end: Margin end of the button
* @prop --margin-bottom: Margin bottom of the button
* @prop --margin-start: Margin start of the button
*
* @prop --padding-top: Padding top of the button
* @prop --padding-end: Padding end of the button
* @prop --padding-bottom: Padding bottom of the button
* @prop --padding-start: Padding start of the button
*
* @prop --icon-margin-top: Margin top of the button icon
* @prop --icon-margin-end: Margin end of the button icon
* @prop --icon-margin-bottom: Margin bottom of the button icon
* @prop --icon-margin-start: Margin start of the button icon
*
* @prop --icon-padding-top: Padding top of the button icon
* @prop --icon-padding-end: Padding end of the button icon
* @prop --icon-padding-bottom: Padding bottom of the button icon
* @prop --icon-padding-start: Padding start of the button icon
*
* @prop --icon-font-size: Font size of the button icon
* @prop --icon-font-weight: Font weight of the button icon
*/
--background: transparent;
--ripple-color: currentColor;
--transition: background-color, opacity 100ms linear;
--opacity: 1;
display: none; display: none;
color: #{current-color(base)}; font-family: $font-family-base;
pointer-events: all;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
@ -20,27 +66,61 @@
font-kerning: none; font-kerning: none;
} }
// Back Button with Color
// --------------------------------------------------
:host(.ion-color) .back-button-native {
color: current-color(base);
}
// Back Button States
// --------------------------------------------------
:host(.activated) .back-button-native {
opacity: .4;
}
:host-context(.can-go-back > ion-header), :host-context(.can-go-back > ion-header),
:host(.show-back-button) { :host(.show-back-button) {
display: block; display: block;
} }
// Native Back Button
// --------------------------------------------------
.back-button-native { .back-button-native {
@include text-inherit(); @include border-radius(var(--border-radius));
@include font-smoothing(); @include font-smoothing();
@include margin(var(--margin-top), var(--margin-end), var(--margin-bottom), var(--margin-start));
@include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
@include text-inherit();
display: block; display: block;
position: relative; position: relative;
transition: background-color, opacity 100ms linear; width: var(--width);
min-width: var(--min-width);
height: var(--height);
min-height: var(--min-height);
transition: var(--transition);
border: 0; border: 0;
outline: none; outline: none;
background: var(--background);
color: var(--color);
line-height: 1; line-height: 1;
cursor: pointer; cursor: pointer;
opacity: var(--opacity);
user-select: none; user-select: none;
z-index: 0; z-index: 0;
appearance: none; appearance: none;
@ -58,8 +138,18 @@
height: 100%; height: 100%;
} }
.back-button-text {
display: flex;
align-items: center; // Back Button Icon
// --------------------------------------------------
ion-icon {
@include padding(var(--icon-padding-top), var(--icon-padding-end), var(--icon-padding-bottom), var(--icon-padding-start));
@include margin(var(--icon-margin-top), var(--icon-margin-end), var(--icon-margin-bottom), var(--icon-margin-start));
display: inherit;
font-size: var(--icon-font-size);
font-weight: var(--icon-font-weight);
pointer-events: none;
} }

19
core/src/components/back-button/back-button.tsx
View File

@ -39,12 +39,12 @@ export class BackButton implements ComponentInterface {
/** /**
* The icon name to use for the back button. * The icon name to use for the back button.
*/ */
@Prop() icon?: string; @Prop() icon?: string | null;
/** /**
* The text to display in the back button. * The text to display in the back button.
*/ */
@Prop() text?: string; @Prop() text?: string | null;
async onClick(ev: Event) { async onClick(ev: Event) {
const nav = this.el.closest('ion-nav'); const nav = this.el.closest('ion-nav');
@ -60,18 +60,19 @@ export class BackButton implements ComponentInterface {
const showBackButton = this.defaultHref !== undefined; const showBackButton = this.defaultHref !== undefined;
return { return {
'ion-activatable': true,
class: { class: {
...createColorClasses(this.color), ...createColorClasses(this.color),
'button': true, 'button': true,
'show-back-button': showBackButton 'show-back-button': showBackButton
}, }
'ion-activatable': true,
}; };
} }
render() { render() {
const backButtonIcon = this.icon || this.config.get('backButtonIcon', 'arrow-back'); const defaultBackButtonText = this.mode === 'ios' ? 'Back' : null;
const backButtonText = this.text !== undefined ? this.text : this.config.get('backButtonText', 'Back'); const backButtonIcon = this.icon != null ? this.icon : this.config.get('backButtonIcon', 'arrow-back');
const backButtonText = this.text != null ? this.text : this.config.get('backButtonText', defaultBackButtonText);
return ( return (
<button <button
@ -80,9 +81,9 @@ export class BackButton implements ComponentInterface {
onClick={ev => this.onClick(ev)} onClick={ev => this.onClick(ev)}
> >
<span class="back-button-inner"> <span class="back-button-inner">
{backButtonIcon && <ion-icon icon={backButtonIcon} lazy={false}/>} {backButtonIcon && <ion-icon icon={backButtonIcon} lazy={false}></ion-icon>}
{this.mode === 'ios' && backButtonText && <span class="button-text">{backButtonText}</span>} {backButtonText && <span class="back-button-text">{backButtonText}</span>}
{this.mode === 'md' && <ion-ripple-effect />} {this.mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
</span> </span>
</button> </button>
); );

34
core/src/components/back-button/readme.md
View File

@ -19,6 +19,40 @@ To change what is displayed in the back button, use the `text` and `icon` proper
| `text` | `text` | The text to display in the back button. | `string` | | `text` | `text` | The text to display in the back button. | `string` |
## CSS Custom Properties
| Name | Description |
| ----------------------- | --------------------------------- |
| `--background` | Background of the button |
| `--border-radius` | Border radius of the button |
| `--color` | Text color of the button |
| `--height` | Height of the button |
| `--icon-font-size` | Font size of the button icon |
| `--icon-font-weight` | Font weight of the button icon |
| `--icon-margin-bottom` | Margin bottom of the button icon |
| `--icon-margin-end` | Margin end of the button icon |
| `--icon-margin-start` | Margin start of the button icon |
| `--icon-margin-top` | Margin top of the button icon |
| `--icon-padding-bottom` | Padding bottom of the button icon |
| `--icon-padding-end` | Padding end of the button icon |
| `--icon-padding-start` | Padding start of the button icon |
| `--icon-padding-top` | Padding top of the button icon |
| `--margin-bottom` | Margin bottom of the button |
| `--margin-end` | Margin end of the button |
| `--margin-start` | Margin start of the button |
| `--margin-top` | Margin top of the button |
| `--min-height` | Minimum height of the button |
| `--min-width` | Minimum width of the button |
| `--opacity` | Opacity of the button |
| `--padding-bottom` | Padding bottom of the button |
| `--padding-end` | Padding end of the button |
| `--padding-start` | Padding start of the button |
| `--padding-top` | Padding top of the button |
| `--ripple-color` | Color of the button ripple effect |
| `--transition` | Transition of the button |
| `--width` | Width of the button |
---------------------------------------------- ----------------------------------------------
*Built with [StencilJS](https://stenciljs.com/)* *Built with [StencilJS](https://stenciljs.com/)*

110
core/src/components/back-button/test/standalone/index.html
View File

@ -10,8 +10,114 @@
</head> </head>
<body> <body>
<ion-back-button class="show-back-button"></ion-back-button> <h3>Default</h3>
<p>
<ion-back-button></ion-back-button>
<ion-back-button text="Back"></ion-back-button>
<ion-back-button icon="add"></ion-back-button>
<ion-back-button text="Text Only" icon=""></ion-back-button>
<ion-back-button icon="heart" text="Love" color="danger"></ion-back-button>
</p>
<h3>Colors</h3>
<p>
<ion-back-button color="primary"></ion-back-button>
<ion-back-button color="secondary"></ion-back-button>
<ion-back-button color="tertiary"></ion-back-button>
<ion-back-button color="success"></ion-back-button>
<ion-back-button color="warning"></ion-back-button>
<ion-back-button color="danger"></ion-back-button>
<ion-back-button color="light"></ion-back-button>
<ion-back-button color="medium"></ion-back-button>
<ion-back-button color="dark"></ion-back-button>
</p>
<p>
<ion-back-button color="primary" class="activated"></ion-back-button>
<ion-back-button color="secondary" class="activated"></ion-back-button>
<ion-back-button color="tertiary" class="activated"></ion-back-button>
<ion-back-button color="success" class="activated"></ion-back-button>
<ion-back-button color="warning" class="activated"></ion-back-button>
<ion-back-button color="danger" class="activated"></ion-back-button>
<ion-back-button color="light" class="activated"></ion-back-button>
<ion-back-button color="medium" class="activated"></ion-back-button>
<ion-back-button color="dark" class="activated"></ion-back-button>
</p>
<h3>Custom</h3>
<!-- Custom Font -->
<ion-back-button class="wide" text="wide"></ion-back-button>
<ion-back-button class="large" text="large"></ion-back-button>
<ion-back-button class="round" text="round"></ion-back-button>
<!-- Custom Colors -->
<ion-back-button class="custom"></ion-back-button>
<ion-back-button class="custom activated"></ion-back-button>
<ion-back-button color="secondary" class="custom"></ion-back-button>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
<ion-back-button class="activated"></ion-back-button>
</ion-buttons>
<ion-title>Default</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button class="custom"></ion-back-button>
<ion-back-button class="custom activated"></ion-back-button>
</ion-buttons>
<ion-title>Custom</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button color="secondary"></ion-back-button>
<ion-back-button color="secondary" class="activated"></ion-back-button>
</ion-buttons>
<ion-title>Secondary</ion-title>
</ion-toolbar>
<ion-toolbar color="danger">
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
<ion-back-button class="activated"></ion-back-button>
</ion-buttons>
<ion-title>Danger</ion-title>
</ion-toolbar>
<ion-toolbar color="dark">
<ion-buttons slot="start">
<ion-back-button text="Back" icon=""></ion-back-button>
<ion-back-button text="Back" icon="" class="activated"></ion-back-button>
</ion-buttons>
<ion-title>Dark</ion-title>
</ion-toolbar>
<style>
ion-back-button {
display: inline-block !important;
}
.wide {
--width: 200px;
--background: lightblue;
}
.large {
font-size: 32px;
text-transform: capitalize;
}
.custom {
--background: lightpink;
--color: rgb(214, 60, 235);
--border-radius: 10px;
--padding-start: 10px;
--padding-end: 10px;
}
</style>
</body> </body>
</html> </html>