docs(demos): add segment demo

This commit is contained in:
Drew Rygh
2015-11-10 22:34:45 -06:00
parent e43d0e6057
commit 4a51a98f69
12 changed files with 96 additions and 0 deletions

View File

@ -94,6 +94,7 @@ export function getPageFor(hash) {
'checkbox': inputs.CheckboxPage,
'radio': inputs.RadioPage,
'range': inputs.RangePage,
'segment': inputs.SegmentPage,
'select': inputs.SelectPage,
'switch': inputs.SwitchPage,

Binary file not shown.

After

Width:  |  Height:  |  Size: 43 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 43 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 41 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 49 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 59 KiB

View File

@ -1,5 +1,6 @@
export * from './checkbox/pages';
export * from './radio/pages';
export * from './range/pages';
export * from './segment/pages';
export * from './select/pages';
export * from './switch/pages';

View File

@ -0,0 +1,14 @@
import {Page} from 'ionic/ionic';
import {forwardRef} from 'angular2/angular2';
import {AndroidAttribute} from '../../helpers';
@Page({
templateUrl: 'inputs/segment/template.html',
directives: [forwardRef(() => AndroidAttribute)]
})
export class SegmentPage{
constructor() {
this.pet = "puppies";
}
}

View File

@ -0,0 +1,80 @@
<ion-navbar *navbar hide-back-button class="android-attr">
<ion-title>
Segment
</ion-title>
</ion-navbar>
<ion-content>
<div padding>
<ion-segment [(ng-model)]="pet">
<ion-segment-button value="kittens">
Kittens
</ion-segment-button>
<ion-segment-button value="puppies">
Puppies
</ion-segment-button>
</ion-segment>
</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>
</div>
</ion-content>