javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 03:00:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(demos): add list and item demo

Browse Source
This commit is contained in:
Drew Rygh
2015-10-01 11:36:04 -05:00
parent c89deca542
commit ec480b1fd9
4 changed files with 258 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
demos/component-docs/app.css
View File

@ -5,3 +5,24 @@ body {
section.hidden {
display: none !important;
}
#ionitron {
width: 100px;
height: 100px;
position: absolute;
top: 25%;
margin-top: -50px;
left: 50%;
margin-left: -50px;
}
.animation-buttons {
position: absolute;
bottom: 25%;
left: 60px;
display: inline;
}
.components-demo h4 {
text-align: center;
}

24
demos/component-docs/index.ts
View File

@ -1,4 +1,4 @@
import {App, ActionSheet} from 'ionic/ionic';
import {App, ActionSheet, Animation} from 'ionic/ionic';
import {NgZone} from 'angular2/angular2';
function toTitleCase(str) {
@ -26,6 +26,7 @@ class DemoApp {
}
});
};
this.setupAnimations();
}
openMenu() {
@ -54,5 +55,26 @@ class DemoApp {
});
}
setupAnimations() {
this.animation = new Animation();
this.animation
.duration(2000)
var ionitronSpin = new Animation(document.querySelector('#ionitron'));
ionitronSpin
.from('transform', 'rotate(0deg)')
.to('transform', 'rotate(360deg)')
this.animation.add(ionitronSpin);
}
play() {
this.animation.play();
}
pause() {
this.animation.pause();
}
}

219
demos/component-docs/main.html
View File

@ -9,24 +9,231 @@
</button>
</section>
<section id="animation" [ng-class]="{hidden: component.title !== 'Animations' }">
TODO
<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' }">
TODO
<h4>Colors</h4>
<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>
<h4>Shapes</h4>
<p>
<button full>Full Button</button>
</p>
<p>
<button block>Block Button</button>
</p>
<p>
<button round>Round Button</button>
</p>
<p>
<button fab style="position: relative;">FAB</button>
</p>
<h4>Outlines</h4>
<p>
<button secondary full outline>Outline + Full</button>
</p>
<p>
<button secondary block outline>Outline + Block</button>
</p>
<p>
<button secondary round outline>Outline + Round</button>
</p>
<p>
<button secondary fab outline style="position: relative;">FAB</button>
</p>
<h4>Icons</h4>
<p>
<button dark>
<icon star></icon>
Left Icon
</button>
</p>
<p>
<button dark>
Right Icon
<icon star></icon>
</button>
</p>
<p>
<button dark>
<icon star></icon>
</button>
</p>
<h4>Sizes</h4>
<p>
<button light large>Large</button>
</p>
<p>
<button light>Default</button>
</p>
<p>
<button light small>Small</button>
</p>
</section>
<section id="cards" [ng-class]="{hidden: component.title !== 'Cards' }">
TODO
<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' }">
TODO
</section>
<section id="lists" [ng-class]="{hidden: component.title !== 'Lists' }">
TODO
<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

2
scripts/demos/docs.index.template.html
View File

@ -5,7 +5,7 @@
<!-- 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">
<link href="/css/v2-demos/css/ionic.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="app.css">
</head>