javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 19:21:34 +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;
}
ion-hide-when.hide-content {
/* stylelint-disable-next-line declaration-no-important */
display: none !important;
:host(.hide-content) {
display: none;
}

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({
tag: 'ion-hide-when',
styleUrl: './hide-when.scss'
styleUrl: './hide-when.scss',
shadow: true
})
export class HideWhen implements ComponentInterface, DisplayWhen {
@ -61,9 +62,12 @@ export class HideWhen implements ComponentInterface, DisplayWhen {
hostData() {
return {
class: {
'show-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>
<h2>Mode Tests</h2>
<ion-hide-when mode="md, ios">
<ion-hide-when modes="md, ios">
<div>Hides on MD, iOS</div>
</ion-hide-when>
<ion-hide-when mode="md">
<ion-hide-when modes="md">
<div>Hides on MD only</div>
</ion-hide-when>
<ion-hide-when mode="ios">
<ion-hide-when modes="ios">
<div>Hides on iOS only</div>
</ion-hide-when>

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

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

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

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

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

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

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({
tag: 'ion-show-when',
styleUrl: 'show-when.scss'
styleUrl: 'show-when.scss',
shadow: true
})
export class ShowWhen implements ComponentInterface, DisplayWhen {
@ -63,9 +64,11 @@ export class ShowWhen implements ComponentInterface, DisplayWhen {
return {
class: {
'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>
<h2>Mode Tests</h2>
<ion-show-when mode="md, ios">
<ion-show-when modes="md, ios">
<div>Shows on MD, iOS</div>
</ion-show-when>
<ion-show-when mode="md">
<ion-show-when modes="md">
<div>Shows on MD only</div>
</ion-show-when>
<ion-show-when mode="ios">
<ion-show-when modes="ios">
<div>Shows on iOS only</div>
</ion-show-when>

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

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