mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-21 21:15:24 +08:00
80 lines
1.8 KiB
HTML
80 lines
1.8 KiB
HTML
|
|
<ion-toolbar>
|
|
<ion-title>Show/Hide When</ion-title>
|
|
<ion-buttons end>
|
|
<button showWhen="ios">iOS</button>
|
|
<button showWhen="windows">Windows</button>
|
|
<button showWhen="android">Android</button>
|
|
</ion-buttons>
|
|
</ion-toolbar>
|
|
|
|
|
|
<ion-content padding>
|
|
<button showWhen="ios">iOS</button>
|
|
<button showWhen="windows">Windows</button>
|
|
<button showWhen="android">Android</button>
|
|
|
|
<p showWhen="ios" style="background:blue; color:white">
|
|
showWhen="ios"
|
|
</p>
|
|
|
|
<p showWhen="android" style="background:green; color:white">
|
|
showWhen="android"
|
|
</p>
|
|
|
|
<p showWhen="android,ios" style="background:yellow;">
|
|
showWhen="android,ios"
|
|
</p>
|
|
|
|
<p showWhen="core" style="background:#ddd;">
|
|
showWhen="core"
|
|
</p>
|
|
|
|
<p showWhen="mobile" style="background:orange;">
|
|
showWhen="mobile"
|
|
</p>
|
|
|
|
<p showWhen="phablet" style="background:red;">
|
|
showWhen="phablet"
|
|
</p>
|
|
|
|
<p showWhen="tablet" style="background:black;color:white">
|
|
showWhen="tablet"
|
|
</p>
|
|
|
|
<p showWhen="iphone" style="background:purple; color:white;">
|
|
showWhen="iphone"
|
|
</p>
|
|
|
|
<p showWhen="landscape" style="background:pink;">
|
|
showWhen="landscape"
|
|
</p>
|
|
|
|
<p showWhen="portrait" style="background:maroon; color:white;">
|
|
showWhen="portrait"
|
|
</p>
|
|
|
|
<p hideWhen="ios" style="background:blue; color:white">
|
|
hideWhen="ios"
|
|
</p>
|
|
|
|
<p hideWhen="android" style="background:green; color:white">
|
|
hideWhen="android"
|
|
</p>
|
|
|
|
<p hideWhen="android,ios" style="background:yellow;">
|
|
hideWhen="android,ios"
|
|
</p>
|
|
|
|
<p hideWhen="ios" [hidden]="toggle" style="background:magenta; color:white">
|
|
hideWhen="ios" [hidden]=toggle
|
|
</p>
|
|
|
|
<p showWhen="android" hideWhen="landscape" style="background:black; color:white">
|
|
showWhen="android" hideWhen="landscape"
|
|
</p>
|
|
|
|
<button (click)="toggle = !toggle">Toggle Hide When</button>
|
|
|
|
</ion-content>
|