mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
165 lines
4.0 KiB
HTML
165 lines
4.0 KiB
HTML
<ion-app>
|
|
<ion-page class="show-page">
|
|
<ion-header>
|
|
<ion-toolbar>
|
|
<ion-title>Test</ion-title>
|
|
</ion-toolbar>
|
|
</ion-header>
|
|
<ion-content padding>
|
|
|
|
<div>
|
|
<h2>Mode Tests</h2>
|
|
<ion-show-when mode="md, ios">
|
|
<div>Shows on MD, iOS</div>
|
|
</ion-show-when>
|
|
|
|
<ion-show-when mode="md">
|
|
<div>Shows on MD only</div>
|
|
</ion-show-when>
|
|
|
|
<ion-show-when mode="ios">
|
|
<div>Shows on iOS only</div>
|
|
</ion-show-when>
|
|
|
|
<ion-hide-when mode="md, ios">
|
|
<div>Hides on MD, iOS</div>
|
|
</ion-hide-when>
|
|
|
|
<ion-hide-when mode="md">
|
|
<div>Hides on MD only</div>
|
|
</ion-hide-when>
|
|
|
|
<ion-hide-when mode="ios">
|
|
<div>Hides on iOS only</div>
|
|
</ion-hide-when>
|
|
</div>
|
|
|
|
<br>
|
|
<div>
|
|
<h2>Orientation Tests</h2>
|
|
<ion-show-when orientation="portrait">
|
|
<div>Shows on portrait orientation</div>
|
|
</ion-show-when>
|
|
|
|
<ion-show-when orientation="landscape">
|
|
<div>Shows on landscape orientation</div>
|
|
</ion-show-when>
|
|
|
|
<ion-hide-when orientation="portrait">
|
|
<div>Hides on portrait orientation</div>
|
|
</ion-hide-when>
|
|
|
|
<ion-hide-when orientation="landscape">
|
|
<div>Hides on landscape orientation</div>
|
|
</ion-hide-when>
|
|
</div>
|
|
|
|
<br>
|
|
<div>
|
|
<h2>Platform Tests</h2>
|
|
|
|
<ion-show-when platform="android,ios">
|
|
<div>Render on Android and iOS</div>
|
|
</ion-show-when>
|
|
|
|
<ion-show-when platform="ios">
|
|
<div>Only show on iOS</div>
|
|
</ion-show-when>
|
|
|
|
<ion-show-when platform="android">
|
|
<div>Only show on Android</div>
|
|
</ion-show-when>
|
|
|
|
<ion-show-when platform="ipad">
|
|
<div>Only show on ipad</div>
|
|
</ion-show-when>
|
|
|
|
<ion-show-when platform="phablet">
|
|
<div>Only show on phablet</div>
|
|
</ion-show-when>
|
|
|
|
<ion-show-when platform="iphone">
|
|
<div>Only show on phone</div>
|
|
</ion-show-when>
|
|
|
|
<ion-hide-when platform="android,ios">
|
|
<div>Hides on Android and iOS</div>
|
|
</ion-hide-when>
|
|
|
|
<ion-hide-when platform="ios">
|
|
<div>Only hide on iOS</div>
|
|
</ion-hide-when>
|
|
|
|
<ion-hide-when platform="android">
|
|
<div>Only hide on Android</div>
|
|
</ion-hide-when>
|
|
|
|
<ion-hide-when platform="ipad">
|
|
<div>Only hide on ipad</div>
|
|
</ion-hide-when>
|
|
|
|
<ion-hide-when platform="phablet">
|
|
<div>Only hide on phablet</div>
|
|
</ion-hide-when>
|
|
|
|
<ion-hide-when platform="iphone">
|
|
<div>Only hide on phone</div>
|
|
</ion-hide-when>
|
|
</div>
|
|
|
|
<br>
|
|
<div>
|
|
<h2>Size Tests</h2>
|
|
<ion-show-when size="xs">
|
|
<div>Only show on xs</div>
|
|
</ion-show-when>
|
|
|
|
<ion-show-when size="sm">
|
|
<div>Only show on sm</div>
|
|
</ion-show-when>
|
|
|
|
<ion-show-when size="md">
|
|
<div>Only show on md</div>
|
|
</ion-show-when>
|
|
|
|
<ion-show-when size="lg">
|
|
<div>Only show on lg</div>
|
|
</ion-show-when>
|
|
|
|
<ion-show-when size="xl">
|
|
<div>Only show on xl</div>
|
|
</ion-show-when>
|
|
|
|
<ion-show-when size="xs, m">
|
|
<div>Only show on XS or m</div>
|
|
</ion-show-when>
|
|
|
|
<ion-hide-when size="xs">
|
|
<div>Only hide on xs</div>
|
|
</ion-hide-when>
|
|
|
|
<ion-hide-when size="sm">
|
|
<div>Only hide on sm</div>
|
|
</ion-hide-when>
|
|
|
|
<ion-hide-when size="md">
|
|
<div>Only hide on md</div>
|
|
</ion-hide-when>
|
|
|
|
<ion-hide-when size="lg">
|
|
<div>Only hide on lg</div>
|
|
</ion-hide-when>
|
|
|
|
<ion-hide-when size="xl">
|
|
<div>Only hide on xl</div>
|
|
</ion-hide-when>
|
|
|
|
<ion-hide-when size="xs, m">
|
|
<div>Only hide on XS or m</div>
|
|
</ion-hide-when>
|
|
</div>
|
|
|
|
</ion-content>
|
|
</ion-page>
|
|
</ion-app>
|