docs(demos/segment): api demo
Drew Rygh
@@ -1,21 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<!-- https://www.chromium.org/developers/design-documents/chromium-graphics/how-to-get-gpu-rasterization -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
||||
|
||||
<link href="../../css/ionic.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<ion-app>
|
||||
<ion-loading-icon></ion-loading-icon>
|
||||
</ion-app>
|
||||
|
||||
<script src="../../js/ionic.bundle.js"></script>
|
||||
|
||||
<script>System.import("index");</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
BIN
demos/segment/img/thumbnail-duckling-1.jpg
Normal file
|
After Width: | Height: | Size: 9.2 KiB |
BIN
demos/segment/img/thumbnail-duckling-2.jpg
Normal file
|
After Width: | Height: | Size: 8.8 KiB |
BIN
demos/segment/img/thumbnail-duckling-3.jpg
Normal file
|
After Width: | Height: | Size: 10 KiB |
BIN
demos/segment/img/thumbnail-duckling-4.jpg
Normal file
|
After Width: | Height: | Size: 7.7 KiB |
BIN
demos/segment/img/thumbnail-kitten-1.jpg
Normal file
|
After Width: | Height: | Size: 43 KiB |
BIN
demos/segment/img/thumbnail-kitten-2.jpg
Normal file
|
After Width: | Height: | Size: 43 KiB |
BIN
demos/segment/img/thumbnail-kitten-3.jpg
Normal file
|
After Width: | Height: | Size: 18 KiB |
BIN
demos/segment/img/thumbnail-kitten-4.jpg
Normal file
|
After Width: | Height: | Size: 24 KiB |
BIN
demos/segment/img/thumbnail-puppy-1.jpg
Normal file
|
After Width: | Height: | Size: 41 KiB |
BIN
demos/segment/img/thumbnail-puppy-2.jpg
Normal file
|
After Width: | Height: | Size: 48 KiB |
BIN
demos/segment/img/thumbnail-puppy-3.jpg
Normal file
|
After Width: | Height: | Size: 49 KiB |
BIN
demos/segment/img/thumbnail-puppy-4.jpg
Normal file
|
After Width: | Height: | Size: 59 KiB |
13
demos/segment/index.ts
Normal file
@@ -0,0 +1,13 @@
|
||||
import {App, Platform} from 'ionic/ionic';
|
||||
|
||||
@App({
|
||||
templateUrl: 'main.html'
|
||||
})
|
||||
|
||||
class DemoApp {
|
||||
constructor(platform: Platform) {
|
||||
this.platform = platform;
|
||||
this.pet = "puppies";
|
||||
this.isAndroid = platform.is('android');
|
||||
}
|
||||
}
|
||||
115
demos/segment/main.html
Normal file
@@ -0,0 +1,115 @@
|
||||
<ion-navbar *navbar hide-back-button class="android-attr">
|
||||
|
||||
<ion-title>
|
||||
Segment
|
||||
</ion-title>
|
||||
|
||||
</ion-navbar>
|
||||
|
||||
<ion-toolbar [attr.primary]="isAndroid ? '' : null">
|
||||
<ion-segment [(ng-model)]="pet">
|
||||
<ion-segment-button value="puppies">
|
||||
Puppies
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="kittens">
|
||||
Kittens
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="ducklings">
|
||||
Ducklings
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
</ion-toolbar>
|
||||
|
||||
|
||||
<ion-content>
|
||||
|
||||
<!-- <div padding>
|
||||
|
||||
</div> -->
|
||||
|
||||
<div [ng-switch]="pet">
|
||||
<ion-list *ng-switch-when="'puppies'">
|
||||
<ion-item>
|
||||
<ion-thumbnail item-left>
|
||||
<img src="img/thumbnail-puppy-1.jpg">
|
||||
</ion-thumbnail>
|
||||
<h2>Ruby</h2>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-thumbnail item-left>
|
||||
<img src="img/thumbnail-puppy-2.jpg">
|
||||
</ion-thumbnail>
|
||||
<h2>Oscar</h2>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-thumbnail item-left>
|
||||
<img src="img/thumbnail-puppy-4.jpg">
|
||||
</ion-thumbnail>
|
||||
<h2>Zoey</h2>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-thumbnail item-left>
|
||||
<img src="img/thumbnail-puppy-3.jpg">
|
||||
</ion-thumbnail>
|
||||
<h2>Otto</h2>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
|
||||
<ion-list *ng-switch-when="'kittens'">
|
||||
<ion-item>
|
||||
<ion-thumbnail item-left>
|
||||
<img src="img/thumbnail-kitten-1.jpg">
|
||||
</ion-thumbnail>
|
||||
<h2>Luna</h2>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-thumbnail item-left>
|
||||
<img src="img/thumbnail-kitten-3.jpg">
|
||||
</ion-thumbnail>
|
||||
<h2>Milo</h2>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-thumbnail item-left>
|
||||
<img src="img/thumbnail-kitten-4.jpg">
|
||||
</ion-thumbnail>
|
||||
<h2>Bandit</h2>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-thumbnail item-left>
|
||||
<img src="img/thumbnail-kitten-2.jpg">
|
||||
</ion-thumbnail>
|
||||
<h2>Nala</h2>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
|
||||
<ion-list *ng-switch-when="'ducklings'">
|
||||
<ion-item>
|
||||
<ion-thumbnail item-left>
|
||||
<img src="img/thumbnail-duckling-1.jpg">
|
||||
</ion-thumbnail>
|
||||
<h2>Daffy</h2>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-thumbnail item-left>
|
||||
<img src="img/thumbnail-duckling-2.jpg">
|
||||
</ion-thumbnail>
|
||||
<h2>Huey</h2>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-thumbnail item-left>
|
||||
<img src="img/thumbnail-duckling-3.jpg">
|
||||
</ion-thumbnail>
|
||||
<h2>Dewey</h2>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-thumbnail item-left>
|
||||
<img src="img/thumbnail-duckling-4.jpg">
|
||||
</ion-thumbnail>
|
||||
<h2>Louie</h2>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</div>
|
||||
|
||||
|
||||
</ion-content>
|
||||
|
||||