mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
docs(demos): prettify segment demo and fix API docs on it
references driftyco/ionic-site#397
This commit is contained in:
Brandy Carney
@@ -1,12 +1,21 @@
|
||||
import {App, Platform} from 'ionic/ionic';
|
||||
import {App} from 'ionic/ionic';
|
||||
|
||||
@App({
|
||||
templateUrl: 'main.html'
|
||||
})
|
||||
class ApiDemoApp {
|
||||
constructor(platform: Platform) {
|
||||
this.platform = platform;
|
||||
constructor() {
|
||||
this.appType = "paid";
|
||||
this.safari = "links";
|
||||
this.news = "local";
|
||||
this.favorites = "recent";
|
||||
|
||||
this.purchased = "all";
|
||||
this.mapStyle = "sat";
|
||||
this.teslaModels = "X";
|
||||
|
||||
this.pet = "puppies";
|
||||
this.isAndroid = platform.is('android');
|
||||
this.calendar = "day";
|
||||
this.proxy = "auto";
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,9 +2,99 @@
|
||||
<ion-title>Segment</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-segment [(ngModel)]="appType">
|
||||
<ion-segment-button value="paid">
|
||||
Paid
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="free">
|
||||
Free
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="top">
|
||||
Top
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar [attr.primary]="isAndroid ? '' : null">
|
||||
<ion-segment [(ngModel)]="pet" [attr.light]="isAndroid ? '' : null">
|
||||
<ion-toolbar>
|
||||
<ion-segment [(ngModel)]="news" secondary>
|
||||
<ion-segment-button value="worldwide">
|
||||
Worldwide
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="local">
|
||||
Local
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="headlines">
|
||||
Headlines
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-segment [(ngModel)]="safari" dark class="icon-segment-demo">
|
||||
<ion-segment-button value="bookmarks">
|
||||
<ion-icon name="book"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="history">
|
||||
<ion-icon ios="ios-glasses-outline" md="md-glasses"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="links">
|
||||
<ion-icon ios="ios-at-outline" md="md-at"></ion-icon>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-segment [(ngModel)]="favorites" danger>
|
||||
<ion-segment-button value="featured">
|
||||
Featured
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="recent">
|
||||
Recent
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-content padding>
|
||||
<p>Segments can be placed in a toolbar or anywhere in the content.</p>
|
||||
|
||||
<ion-segment [(ngModel)]="purchased" primary margin-bottom>
|
||||
<ion-segment-button value="all">
|
||||
All
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="not">
|
||||
Not on This Phone
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<ion-segment [(ngModel)]="mapStyle" secondary margin-bottom>
|
||||
<ion-segment-button value="standard">
|
||||
Standard
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="hybrid">
|
||||
Hybrid
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="sat">
|
||||
Satellite
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<ion-segment [(ngModel)]="teslaModels" danger margin-bottom>
|
||||
<ion-segment-button value="S">
|
||||
Model S
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="X">
|
||||
Model X
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="3">
|
||||
Model 3
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
</ion-content>
|
||||
|
||||
<ion-toolbar position="bottom" primary>
|
||||
<ion-segment [(ngModel)]="pet" light>
|
||||
<ion-segment-button value="puppies">
|
||||
Puppies
|
||||
</ion-segment-button>
|
||||
@@ -17,95 +107,40 @@
|
||||
</ion-segment>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar position="bottom" dark>
|
||||
<ion-segment [(ngModel)]="calendar" primary>
|
||||
<ion-segment-button value="list">
|
||||
List
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="day">
|
||||
Day
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="month" checked>
|
||||
Month
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-content>
|
||||
<ion-toolbar position="bottom" danger>
|
||||
<ion-segment [(ngModel)]="proxy" light>
|
||||
<ion-segment-button value="off">
|
||||
Off
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="manual">
|
||||
Manual
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="auto">
|
||||
Auto
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
</ion-toolbar>
|
||||
|
||||
<!-- <div padding>
|
||||
<style>
|
||||
.icon-segment-demo .segment-button ion-icon {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
|
||||
</div> -->
|
||||
|
||||
<div [ngSwitch]="pet">
|
||||
<ion-list *ngSwitchWhen="'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 *ngSwitchWhen="'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 *ngSwitchWhen="'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>
|
||||
.icon-segment-demo .segment-button {
|
||||
max-height: 2.4rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -38,9 +38,8 @@ import {isDefined} from '../../util/util';
|
||||
* </form>
|
||||
* ```
|
||||
*
|
||||
* @property {string} [value] - the value of the segment-button. Required.
|
||||
* @property {Any} [click] - expression to evaluate when a segment button has been clicked
|
||||
* @property {Any} (select) - expression to evaluate when a segment selection has been changed
|
||||
* @property {string} [value] - the value of the segment button. Required.
|
||||
* @property {Any} (select) - expression to evaluate when a segment button has been clicked
|
||||
*
|
||||
* @demo /docs/v2/demos/segment/
|
||||
* @see {@link /docs/v2/components#segment Segment Component Docs}
|
||||
@@ -136,7 +135,7 @@ export class SegmentButton {
|
||||
* </form>
|
||||
* ```
|
||||
*
|
||||
* @property {Any} [change] - expression to evaluate when a segment button has been changed
|
||||
* @property {Any} (change) - expression to evaluate when a segment button has been changed
|
||||
*
|
||||
* @demo /docs/v2/demos/segment/
|
||||
* @see {@link /docs/v2/components#segment Segment Component Docs}
|
||||
|
||||
Reference in New Issue
Block a user