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

refactor(back-button): convert to shadow component (#19411)

Browse Source 
references #18899
This commit is contained in:
Adam Bradley
2019-11-14 13:39:35 -06:00
committed by Liam DeBeasi
parent b793214fe1
commit 0d40d3f3b7
5 changed files with 12 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
core/api.txt
View File

@ -77,7 +77,7 @@ ion-app,none
ion-avatar,shadow ion-avatar,shadow
ion-avatar,css-prop,--border-radius ion-avatar,css-prop,--border-radius
ion-back-button,scoped ion-back-button,shadow
ion-back-button,prop,color,string | undefined,undefined,false,false ion-back-button,prop,color,string | undefined,undefined,false,false
ion-back-button,prop,defaultHref,string | undefined,undefined,false,false ion-back-button,prop,defaultHref,string | undefined,undefined,false,false
ion-back-button,prop,disabled,boolean,false,false,true ion-back-button,prop,disabled,boolean,false,false,true

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

@ -102,7 +102,6 @@
// Back Button States // Back Button States
// -------------------------------------------------- // --------------------------------------------------
:host-context(.can-go-back > ion-header),
:host(.show-back-button) { :host(.show-back-button) {
display: block; display: block;
} }

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

@ -15,7 +15,7 @@ import { createColorClasses, openURL } from '../../utils/theme';
ios: 'back-button.ios.scss', ios: 'back-button.ios.scss',
md: 'back-button.md.scss' md: 'back-button.md.scss'
}, },
scoped: true shadow: true
}) })
export class BackButton implements ComponentInterface, ButtonInterface { export class BackButton implements ComponentInterface, ButtonInterface {
@ -106,10 +106,10 @@ export class BackButton implements ComponentInterface, ButtonInterface {
'show-back-button': showBackButton 'show-back-button': showBackButton
}} }}
> >
<button type={type} disabled={disabled} class="button-native"> <button type={type} disabled={disabled} class="button-native" part="button">
<span class="button-inner"> <span class="button-inner">
{backButtonIcon && <ion-icon icon={backButtonIcon} lazy={false}></ion-icon>} {backButtonIcon && <ion-icon icon={backButtonIcon} lazy={false} part="icon"></ion-icon>}
{backButtonText && <span class="button-text">{backButtonText}</span>} {backButtonText && <span class="button-text" part="text">{backButtonText}</span>}
</span> </span>
{mode === 'md' && <ion-ripple-effect type={this.rippleType}></ion-ripple-effect>} {mode === 'md' && <ion-ripple-effect type={this.rippleType}></ion-ripple-effect>}
</button> </button>

5
core/src/css/core.scss
View File

@ -103,6 +103,11 @@ ion-toast-controller,
opacity: 0; opacity: 0;
} }
.can-go-back > ion-header ion-back-button {
display: block;
}
// Ionic Safe Margins // Ionic Safe Margins
// -------------------------------------------------- // --------------------------------------------------

4
core/src/utils/transition/ios.transition.ts
View File

@ -99,8 +99,8 @@ const animateBackButton = (rootAnimation: Animation, rtl: boolean, backDirection
const clonedBackButtonEl = getClonedElement('ion-back-button'); const clonedBackButtonEl = getClonedElement('ion-back-button');
const backButtonTextEl = clonedBackButtonEl.querySelector('.button-text'); const backButtonTextEl = shadow(clonedBackButtonEl).querySelector('.button-text');
const backButtonIconEl = clonedBackButtonEl.querySelector('ion-icon'); const backButtonIconEl = shadow(clonedBackButtonEl).querySelector('ion-icon');
clonedBackButtonEl.text = backButtonEl.text; clonedBackButtonEl.text = backButtonEl.text;
clonedBackButtonEl.mode = backButtonEl.mode; clonedBackButtonEl.mode = backButtonEl.mode;