javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 20:33:32 +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

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