mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 03:32:21 +08:00
116 lines
2.7 KiB
HTML
116 lines
2.7 KiB
HTML
<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>
|
|
|