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

fix(hide/show): fix show-when/hide-when

Browse Source 
fixes #15813
This commit is contained in:
Manu Mtz.-Almeida
2018-10-02 18:55:21 +02:00
parent c6bfda0d9b
commit fd01308a8d
9 changed files with 33 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
core/src/components/hide-when/hide-when.scss
View File

@ -1,8 +1,7 @@
ion-hide-when.show-content { :host {
display: block; display: block;
} }
ion-hide-when.hide-content { :host(.hide-content) {
/* stylelint-disable-next-line declaration-no-important */ display: none;
display: none !important;
} }

8
core/src/components/hide-when/hide-when.tsx
View File

@ -5,7 +5,8 @@ import { DisplayWhen, getTestResult } from '../../utils/show-hide-when-utils';
@Component({ @Component({
tag: 'ion-hide-when', tag: 'ion-hide-when',
styleUrl: './hide-when.scss' styleUrl: './hide-when.scss',
shadow: true
}) })
export class HideWhen implements ComponentInterface, DisplayWhen { export class HideWhen implements ComponentInterface, DisplayWhen {
@ -61,9 +62,12 @@ export class HideWhen implements ComponentInterface, DisplayWhen {
hostData() { hostData() {
return { return {
class: { class: {
'show-content': !this.passesTest,
'hide-content': this.passesTest 'hide-content': this.passesTest
} }
}; };
} }
render() {
return <slot></slot>;
}
} }

6
core/src/components/hide-when/test/basic/index.html
View File

@ -21,15 +21,15 @@
<ion-content padding> <ion-content padding>
<h2>Mode Tests</h2> <h2>Mode Tests</h2>
<ion-hide-when mode="md, ios"> <ion-hide-when modes="md, ios">
<div>Hides on MD, iOS</div> <div>Hides on MD, iOS</div>
</ion-hide-when> </ion-hide-when>
<ion-hide-when mode="md"> <ion-hide-when modes="md">
<div>Hides on MD only</div> <div>Hides on MD only</div>
</ion-hide-when> </ion-hide-when>
<ion-hide-when mode="ios"> <ion-hide-when modes="ios">
<div>Hides on iOS only</div> <div>Hides on iOS only</div>
</ion-hide-when> </ion-hide-when>

6
core/src/components/hide-when/test/preview/index.html
View File

@ -21,15 +21,15 @@
<ion-content padding fullscreen> <ion-content padding fullscreen>
<h2>Mode Tests</h2> <h2>Mode Tests</h2>
<ion-hide-when mode="md, ios"> <ion-hide-when modes="md, ios">
<div>Hides on MD, iOS</div> <div>Hides on MD, iOS</div>
</ion-hide-when> </ion-hide-when>
<ion-hide-when mode="md"> <ion-hide-when modes="md">
<div>Hides on MD only</div> <div>Hides on MD only</div>
</ion-hide-when> </ion-hide-when>
<ion-hide-when mode="ios"> <ion-hide-when modes="ios">
<div>Hides on iOS only</div> <div>Hides on iOS only</div>
</ion-hide-when> </ion-hide-when>

6
core/src/components/hide-when/usage/javascript.md
View File

@ -2,15 +2,15 @@
<ion-content padding> <ion-content padding>
<h2>Mode Tests</h2> <h2>Mode Tests</h2>
<ion-hide-when mode="md, ios"> <ion-hide-when modes="md, ios">
<div>Hides on MD, iOS</div> <div>Hides on MD, iOS</div>
</ion-hide-when> </ion-hide-when>
<ion-hide-when mode="md"> <ion-hide-when modes="md">
<div>Hides on MD only</div> <div>Hides on MD only</div>
</ion-hide-when> </ion-hide-when>
<ion-hide-when mode="ios"> <ion-hide-when modes="ios">
<div>Hides on iOS only</div> <div>Hides on iOS only</div>
</ion-hide-when> </ion-hide-when>

9
core/src/components/show-when/show-when.scss
View File

@ -1,8 +1,7 @@
ion-show-when.show-content { :host {
display: block; display: none;
} }
ion-show-when.hide-content { :host(.show-content) {
/* stylelint-disable-next-line declaration-no-important */ display: block;
display: none !important;
} }

7
core/src/components/show-when/show-when.tsx
View File

@ -5,7 +5,8 @@ import { DisplayWhen, getTestResult } from '../../utils/show-hide-when-utils';
@Component({ @Component({
tag: 'ion-show-when', tag: 'ion-show-when',
styleUrl: 'show-when.scss' styleUrl: 'show-when.scss',
shadow: true
}) })
export class ShowWhen implements ComponentInterface, DisplayWhen { export class ShowWhen implements ComponentInterface, DisplayWhen {
@ -63,9 +64,11 @@ export class ShowWhen implements ComponentInterface, DisplayWhen {
return { return {
class: { class: {
'show-content': this.passesTest, 'show-content': this.passesTest,
'hide-content': !this.passesTest
} }
}; };
} }
render() {
return <slot></slot>;
}
} }

6
core/src/components/show-when/test/basic/index.html
View File

@ -21,15 +21,15 @@
<ion-content padding> <ion-content padding>
<h2>Mode Tests</h2> <h2>Mode Tests</h2>
<ion-show-when mode="md, ios"> <ion-show-when modes="md, ios">
<div>Shows on MD, iOS</div> <div>Shows on MD, iOS</div>
</ion-show-when> </ion-show-when>
<ion-show-when mode="md"> <ion-show-when modes="md">
<div>Shows on MD only</div> <div>Shows on MD only</div>
</ion-show-when> </ion-show-when>
<ion-show-when mode="ios"> <ion-show-when modes="ios">
<div>Shows on iOS only</div> <div>Shows on iOS only</div>
</ion-show-when> </ion-show-when>

6
core/src/components/show-when/test/preview/index.html
View File

@ -21,15 +21,15 @@
<ion-content padding fullscreen> <ion-content padding fullscreen>
<h2>Mode Tests</h2> <h2>Mode Tests</h2>
<ion-show-when mode="md, ios"> <ion-show-when modes="md, ios">
<div>Shows on MD, iOS</div> <div>Shows on MD, iOS</div>
</ion-show-when> </ion-show-when>
<ion-show-when mode="md"> <ion-show-when modes="md">
<div>Shows on MD only</div> <div>Shows on MD only</div>
</ion-show-when> </ion-show-when>
<ion-show-when mode="ios"> <ion-show-when modes="ios">
<div>Shows on iOS only</div> <div>Shows on iOS only</div>
</ion-show-when> </ion-show-when>