mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 19:21:34 +08:00
305 lines
6.9 KiB
HTML
305 lines
6.9 KiB
HTML
|
|
|
|
<ion-navbar *navbar class="show-navbar">
|
|
<ion-title>{{ component.title }}</ion-title>
|
|
</ion-navbar>
|
|
|
|
|
|
<ion-content class="has-header components-demo">
|
|
|
|
<section id="action-sheet" [ng-class]="{hidden: component.title !== 'Action Sheets' }">
|
|
<button class="button" (click)="openMenu()">
|
|
Show Actionsheet
|
|
</button>
|
|
</section>
|
|
|
|
|
|
<section id="animation" [ng-class]="{hidden: component.title !== 'Animations' }">
|
|
<img src="http://ionicframework.com/present-ionic/slides/img/me.png" id="ionitron">
|
|
|
|
<div class="animation-buttons">
|
|
<button icon pause primary (click)="pause($event)">
|
|
Pause
|
|
<icon pause></icon>
|
|
</button>
|
|
<button icon play secondary (click)="play($event)">
|
|
Play
|
|
<icon play></icon>
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section id="buttons" [ng-class]="{hidden: component.title !== 'Buttons' }" class="section-padding">
|
|
|
|
<p>
|
|
<button block>Default</button>
|
|
</p>
|
|
|
|
<p>
|
|
<button secondary block>Secondary</button>
|
|
</p>
|
|
|
|
<p>
|
|
<button danger block>Danger</button>
|
|
</p>
|
|
|
|
<p>
|
|
<button light block>Light</button>
|
|
</p>
|
|
|
|
<p>
|
|
<button dark block>Dark</button>
|
|
</p>
|
|
|
|
</section>
|
|
|
|
|
|
<section id="cards" [ng-class]="{hidden: component.title !== 'Cards' }">
|
|
|
|
<ion-card>
|
|
|
|
<ion-card-header primary>
|
|
Menu
|
|
</ion-card-header>
|
|
|
|
<ion-card-content>
|
|
<a ion-item href="#">
|
|
<icon home item-left></icon>
|
|
Home
|
|
</a>
|
|
|
|
<a ion-item href="#">
|
|
<icon people item-left></icon>
|
|
Friends
|
|
</a>
|
|
|
|
<button ion-item>
|
|
<icon musical-notes item-left></icon>
|
|
Music
|
|
</button>
|
|
|
|
<button ion-item>
|
|
<icon mail item-left></icon>
|
|
Mail
|
|
</button>
|
|
</ion-card-content>
|
|
|
|
</ion-card>
|
|
|
|
|
|
<ion-card>
|
|
|
|
<ion-item>
|
|
<icon football item-left></icon>
|
|
Schedule
|
|
<button outline item-right>Open</button>
|
|
</ion-item>
|
|
|
|
</ion-card>
|
|
|
|
<ion-card>
|
|
|
|
<ion-item>
|
|
<icon trophy item-left></icon>
|
|
Trophies
|
|
<button outline item-right>View</button>
|
|
</ion-item>
|
|
|
|
</ion-card>
|
|
|
|
|
|
</section>
|
|
|
|
<section id="icons" [ng-class]="{hidden: component.title !== 'Icons' }" class="components-icons">
|
|
|
|
<ion-row>
|
|
<ion-col><icon ionic></icon></ion-col>
|
|
<ion-col><icon ion-social-angular></icon></ion-col>
|
|
<ion-col><icon ionitron></icon></ion-col>
|
|
</ion-row>
|
|
|
|
<ion-row>
|
|
<ion-col><icon heart></icon></ion-col>
|
|
<ion-col><icon apps></icon></ion-col>
|
|
<ion-col><icon happy></icon></ion-col>
|
|
</ion-row>
|
|
|
|
<ion-row>
|
|
<ion-col><icon people></icon></ion-col>
|
|
<ion-col><icon person></icon></ion-col>
|
|
<ion-col><icon contact></icon></ion-col>
|
|
</ion-row>
|
|
|
|
<ion-row>
|
|
<ion-col><icon lock></icon></ion-col>
|
|
<ion-col><icon key></icon></ion-col>
|
|
<ion-col><icon unlock></icon></ion-col>
|
|
</ion-row>
|
|
|
|
<ion-row>
|
|
<ion-col><icon map></icon></ion-col>
|
|
<ion-col><icon navigate></icon></ion-col>
|
|
<ion-col><icon pin></icon></ion-col>
|
|
</ion-row>
|
|
|
|
<ion-row>
|
|
<ion-col><icon mic></icon></ion-col>
|
|
<ion-col><icon musical-notes></icon></ion-col>
|
|
<ion-col><icon volume-up></icon></ion-col>
|
|
</ion-row>
|
|
|
|
<ion-row>
|
|
<ion-col><icon cafe></icon></ion-col>
|
|
<ion-col><icon calculator></icon></ion-col>
|
|
<ion-col><icon bus></icon></ion-col>
|
|
</ion-row>
|
|
|
|
<ion-row>
|
|
<ion-col><icon camera></icon></ion-col>
|
|
<ion-col><icon cube></icon></ion-col>
|
|
<ion-col><icon image></icon></ion-col>
|
|
</ion-row>
|
|
|
|
<ion-row>
|
|
<ion-col><icon star></icon></ion-col>
|
|
<ion-col><icon wine></icon></ion-col>
|
|
<ion-col><icon pin></icon></ion-col>
|
|
</ion-row>
|
|
|
|
<ion-row>
|
|
<ion-col><icon arrow-back></icon></ion-col>
|
|
<ion-col><icon arrow-dropdown></icon></ion-col>
|
|
<ion-col><icon arrow-forward></icon></ion-col>
|
|
</ion-row>
|
|
|
|
<ion-row>
|
|
<ion-col><icon sunny></icon></ion-col>
|
|
<ion-col><icon umbrella</icon></ion-col>
|
|
<ion-col><icon rainy></icon></ion-col>
|
|
</ion-row>
|
|
|
|
</section>
|
|
|
|
<section id="lists" [ng-class]="{hidden: component.title !== 'Lists' }">
|
|
<ion-list>
|
|
|
|
<ion-header>
|
|
Classes
|
|
</ion-header>
|
|
|
|
<ion-item>
|
|
<icon color-wand item-left></icon>
|
|
Dark Arts
|
|
</ion-item>
|
|
|
|
<ion-item>
|
|
<icon planet item-left></icon>
|
|
Astronomy
|
|
</ion-item>
|
|
|
|
<ion-item>
|
|
<icon flask item-left></icon>
|
|
Potions
|
|
</ion-item>
|
|
|
|
<ion-item>
|
|
<icon star item-left></icon>
|
|
Charms
|
|
</ion-item>
|
|
|
|
</ion-list>
|
|
|
|
|
|
<ion-list>
|
|
|
|
<ion-header>
|
|
Menu
|
|
</ion-header>
|
|
|
|
<ion-switch checked="true">
|
|
<icon shirt item-left></icon>
|
|
Invisibility Cloak
|
|
</ion-switch>
|
|
|
|
<ion-item>
|
|
<icon call item-left></icon>
|
|
Call Ron
|
|
<div class="item-note" item-right>Maybe later</div>
|
|
</ion-item>
|
|
|
|
</ion-list>
|
|
|
|
|
|
</section>
|
|
<section id="menus" [ng-class]="{hidden:component.title !== 'Menus' }">
|
|
TODO
|
|
</section>
|
|
<section id="modals" [ng-class]="{hidden: component.title !== 'Modals' }">
|
|
TODO
|
|
</section>
|
|
|
|
<section id="navigation" [ng-class]="{hidden: component.title !== 'Navigation' }">
|
|
<ion-card>
|
|
<ion-card-header primary>
|
|
Tap for more info...
|
|
</ion-card-header>
|
|
|
|
<ion-card-content>
|
|
|
|
<a ion-item href="#" (click)="openNavDetailsPage('Angular')">
|
|
<icon ion-social-angular item-left></icon>
|
|
Angular
|
|
</a>
|
|
|
|
<a ion-item href="#" (click)="openNavDetailsPage('CSS3')">
|
|
<icon ion-social-css3 item-left></icon>
|
|
CSS3
|
|
</a>
|
|
|
|
<button ion-item (click)="openNavDetailsPage('HTML5')">
|
|
<icon ion-social-html5 item-left></icon>
|
|
HTML5
|
|
</button>
|
|
|
|
<button ion-item (click)="openNavDetailsPage('Sass')">
|
|
<icon ion-social-sass item-left></icon>
|
|
Sass
|
|
</button>
|
|
</ion-card-content>
|
|
|
|
</ion-card>
|
|
|
|
</section>
|
|
|
|
<section id="slides" [ng-class]="{hidden: component.title !== 'Slides' }">
|
|
|
|
<ion-slides id="slider" style="background-color: black" pager="true" zoom="false" index="1" loop="true">
|
|
<ion-slide>
|
|
<div class="demo-slide demo-slide-1">
|
|
Slide 1
|
|
</div>
|
|
</ion-slide>
|
|
<ion-slide>
|
|
<div class="demo-slide demo-slide-2">
|
|
Slide 2
|
|
</div>
|
|
</ion-slide>
|
|
<ion-slide>
|
|
<div class="demo-slide demo-slide-3">
|
|
Slide 3
|
|
</div>
|
|
</ion-slide>
|
|
</ion-slides>
|
|
</section>
|
|
|
|
<section id="tabs" [ng-class]="{hidden: component.title !== 'Tabs' }">
|
|
<ion-tabs tab-bar-placement="bottom">
|
|
<ion-tab tab-title="Food" tab-icon="pizza"></ion-tab>
|
|
<ion-tab tab-title="Drinks" tab-icon="beer"></ion-tab>
|
|
<ion-tab tab-title="Hours" tab-icon="clock"></ion-tab>
|
|
</ion-tabs>
|
|
</section>
|
|
|
|
</ion-content>
|