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

Merge branch 'master' into css-refactor

Browse Source
This commit is contained in:
Adam Bradley
2015-12-07 16:12:02 -06:00
parent 89f16e52b0 ad7fed7bda
commit 53356f6b08
11 changed files with 433 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
demos/list/app.html Normal file
View File

@ -0,0 +1,24 @@
<ion-menu [content]="content" id="leftMenu" side="left">
<ion-toolbar primary>
<ion-title>Menu</ion-title>
</ion-toolbar>
<ion-content>
<ion-list>
<button ion-item *ng-for="#p of pages" (click)="openPage(p)">
{{p.title}}
</button>
<button ion-item menu-close="leftMenu" detail-none>
Close Menu
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav id="nav" [root]="rootPage" #content></ion-nav>

45
demos/list/main.html → demos/list/basic-list.html
View File

@ -1,4 +1,15 @@
<ion-toolbar><ion-title>List Headers</ion-title></ion-toolbar>
<ion-navbar *navbar class="show-navbar">
<a menu-toggle="leftMenu">
<icon menu></icon>
</a>
<ion-title>
Basic List
</ion-title>
</ion-navbar>
<ion-content class="outer-content">
@ -29,15 +40,6 @@
</ion-note>
</ion-item>
</ion-list>
<ion-list>
<ion-list-header>
List Header
</ion-list-header>
<ion-switch checked="true">
<icon color-wand item-left></icon>
Magic
@ -51,15 +53,6 @@
</ion-note>
</ion-item>
</ion-list>
<ion-list>
<ion-list-header>
List Header with text that is too long to fit inside the list header
</ion-list-header>
<ion-item>
<icon pizza item-left></icon>
Pizza
@ -87,18 +80,4 @@
</ion-list>
<ion-list>
<ion-item>
<icon chatboxes item-left></icon>
New List, no header, Item 1
</ion-item>
<ion-item>
<icon chatboxes item-left></icon>
New List, no header, Item 2
</ion-item>
</ion-list>
</ion-content>

70
demos/list/index.ts
View File

@ -1,7 +1,71 @@
import {App} from 'ionic/ionic';
import {App, IonicApp, Page, Platform} from 'ionic/ionic';
@App({
templateUrl: 'main.html'
templateUrl: 'app.html'
})
class E2EApp {}
class ApiDemoApp {
constructor(app: IonicApp, platform: Platform) {
this.app = app;
this.platform = platform;
this.rootPage = PageOne;
this.pages = [
{ title: 'Basic List', component: PageOne },
{ title: 'Inset List', component: PageTwo },
{ title: 'No-lines List', component: PageThree },
{ title: 'List Headers', component: PageFour },
{ title: 'Sliding Items', component: PageFive },
];
}
openPage(page) {
this.app.getComponent('leftMenu').close();
let nav = this.app.getComponent('nav');
nav.setRoot(page.component);
}
}
@Page({
templateUrl: 'basic-list.html',
})
export class PageOne{
constructor() {
}
}
@Page({
templateUrl: 'inset-list.html',
})
export class PageTwo {
constructor() {
}
}
@Page({
templateUrl: 'no-lines-list.html',
})
export class PageThree {
constructor() {
}
}
@Page({
templateUrl: 'list-headers.html',
})
export class PageFour {
constructor() {
}
}
@Page({
templateUrl: 'sliding-items.html',
})
export class PageFive {
constructor() {
}
}

83
demos/list/inset-list.html Normal file
View File

@ -0,0 +1,83 @@
<ion-navbar *navbar class="show-navbar">
<a menu-toggle="leftMenu">
<icon menu></icon>
</a>
<ion-title>
Inset List
</ion-title>
</ion-navbar>
<ion-content class="outer-content">
<ion-list inset>
<ion-list-header>
List Header
</ion-list-header>
<ion-switch>
<icon wifi item-left></icon>
Wifi
</ion-switch>
<ion-item>
<icon heart item-left></icon>
Affection
<ion-note item-right>
Very Little
</ion-note>
</ion-item>
<ion-item>
<icon home item-left></icon>
Home
<ion-note item-right>
Where the heart is
</ion-note>
</ion-item>
<ion-switch checked="true">
<icon color-wand item-left></icon>
Magic
</ion-switch>
<ion-item>
<icon star item-left></icon>
Star status
<ion-note item-right>
Super
</ion-note>
</ion-item>
<ion-item>
<icon pizza item-left></icon>
Pizza
<ion-note item-right>
Always
</ion-note>
</ion-item>
<ion-item>
<icon beer item-left></icon>
Beer
<ion-note item-right>
Yes Plz
</ion-note>
</ion-item>
<ion-item>
<icon wine item-left></icon>
Wine
<ion-note item-right>
All the time
</ion-note>
</ion-item>
</ion-list>
</ion-content>

37
demos/list/list-headers.html Normal file
View File

@ -0,0 +1,37 @@
<ion-navbar *navbar class="show-navbar">
<a menu-toggle="leftMenu">
<icon menu></icon>
</a>
<ion-title>
List Headers
</ion-title>
</ion-navbar>
<ion-content class="outer-content">
<ion-list>
<ion-list-header>Comedy</ion-list-header>
<ion-item>Airplane!</ion-item>
<ion-item>Caddyshack</ion-item>
<ion-item>Coming To America</ion-item>
</ion-list>
<ion-list>
<ion-list-header>Action</ion-list-header>
<ion-item>Terminator II</ion-item>
<ion-item>The Empire Strikes Back</ion-item>
<ion-item>Blade Runner</ion-item>
</ion-list>
<ion-list>
<ion-list-header>Horror</ion-list-header>
<ion-item>The Evil Dead</ion-item>
<ion-item>Poldergeist</ion-item>
<ion-item>Aliens</ion-item>
</ion-list>
</ion-content>

83
demos/list/no-lines-list.html Normal file
View File

@ -0,0 +1,83 @@
<ion-navbar *navbar class="show-navbar">
<a menu-toggle="leftMenu">
<icon menu></icon>
</a>
<ion-title>
No-lines List
</ion-title>
</ion-navbar>
<ion-content class="outer-content">
<ion-list no-lines>
<ion-list-header>
List Header
</ion-list-header>
<ion-switch>
<icon wifi item-left></icon>
Wifi
</ion-switch>
<ion-item>
<icon heart item-left></icon>
Affection
<ion-note item-right>
Very Little
</ion-note>
</ion-item>
<ion-item>
<icon home item-left></icon>
Home
<ion-note item-right>
Where the heart is
</ion-note>
</ion-item>
<ion-switch checked="true">
<icon color-wand item-left></icon>
Magic
</ion-switch>
<ion-item>
<icon star item-left></icon>
Star status
<ion-note item-right>
Super
</ion-note>
</ion-item>
<ion-item>
<icon pizza item-left></icon>
Pizza
<ion-note item-right>
Always
</ion-note>
</ion-item>
<ion-item>
<icon beer item-left></icon>
Beer
<ion-note item-right>
Yes Plz
</ion-note>
</ion-item>
<ion-item>
<icon wine item-left></icon>
Wine
<ion-note item-right>
All the time
</ion-note>
</ion-item>
</ion-list>
</ion-content>

59
demos/list/sliding-items.html Normal file
View File

@ -0,0 +1,59 @@
<ion-navbar *navbar class="show-navbar">
<a menu-toggle="leftMenu">
<icon menu></icon>
</a>
<ion-title>
Sliding Items
</ion-title>
</ion-navbar>
<ion-content class="outer-content">
<ion-list>
<ion-item-sliding #item>
<button ion-item text-wrap>
<h3>Max Lynch</h3>
<p>
Hey do you want to go to the game tonight?
</p>
</button>
<ion-item-options>
<button primary>Archive</button>
<button danger>Delete</button>
</ion-item-options>
</ion-item-sliding>
<ion-item-sliding #item>
<button ion-item text-wrap>
<h3>Adam Bradley</h3>
<p>
I think I figured out how to get more Mountain Dew
</p>
</button>
<ion-item-options>
<button primary>Archive</button>
<button danger>Delete</button>
</ion-item-options>
</ion-item-sliding>
<ion-item-sliding #item>
<button ion-item text-wrap>
<h3>Ben Sperry</h3>
<p>
I like paper
</p>
</button>
<ion-item-options>
<button primary>Archive</button>
<button danger>Delete</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
</ion-content>

20
ionic/components/scroll/scroll.ts
View File

@ -9,8 +9,24 @@ import {Animation} from '../../animations/animation';
import * as util from 'ionic/util';
/**
* Scroll is a non-flexboxed scroll area that can scroll horizontally or
* vertically.
* @name Scroll
* @description
* Scroll is a non-flexboxed scroll area that can scroll horizontally or vertically. `ion-Scroll` Can be used in places were you may not need a full page scroller, but a highly customized one, such as image scubber or comment scroller.
* @usage
* ```html
* <ion-scroll scroll-x="true">
* </ion-scroll>
*
* <ion-scroll scroll-y="true">
* </ion-scroll>
*
* <ion-scroll scroll-x="true" scroll-y="true">
* </ion-scroll>
* ```
*@property {boolean} [scroll-x] - whether to enable scrolling along the X axis
*@property {boolean} [scroll-y] - whether to enable scrolling along the Y axis
*@property {boolean} [zoom] - whether to enable zooming
*@property {number} [max-zoom] - set the max zoom amount for ion-scroll
*/
@Component({
selector: 'ion-scroll',

45
ionic/components/segment/segment.ts
View File

@ -5,10 +5,12 @@ import {Config} from '../../config/config';
/**
* @name Segment
* @description
* A Segment is a group of buttons, sometimes known as Segmented Controls, that allow the user to interact with a compact group of a number of controls.
*
* Segments provide functionality similar to tabs, selecting one will unselect all others. You should use a tab bar instead of a segmented control when you want to let the user move back and forth between distinct pages in your app.
* You could use Angular 2's `ng-model` or `FormBuilder` API. For an overview on how `FormBuilder` works, checkout [Angular 2 Forms](http://learnangular2.com/forms/), or [Angular FormBuilder](https://angular.io/docs/ts/latest/api/common/FormBuilder-class.html)
*
*
* @usage
* ```html
@ -20,8 +22,11 @@ import {Config} from '../../config/config';
* Enemies
* </ion-segment-button>
* </ion-segment>
*```
*
* Or with `FormBuilder`
*
*```html
* <form [ng-form-model]="myForm">
* <ion-segment ng-control="mapStyle" danger>
* <ion-segment-button value="standard">
@ -38,6 +43,7 @@ import {Config} from '../../config/config';
* ```
*
* @see {@link /docs/v2/components#segment Segment Component Docs}
* @see [Angular 2 Forms](http://learnangular2.com/forms/)
*/
@Directive({
selector: 'ion-segment'
@ -127,6 +133,43 @@ export class Segment extends Ion {
}
/**
* @name SegmentButton
* @description
* The child buttons of the `ion-segment` component. Each `ion-segment-button` must have a value.
* @property {string} [value] - the value of the segment-button.
* @usage
* ```html
* <ion-segment [(ng-model)]="relationship" danger>
* <ion-segment-button value="friends">
* Friends
* </ion-segment-button>
* <ion-segment-button value="enemies">
* Enemies
* </ion-segment-button>
* </ion-segment>
*```
*
* Or with `FormBuilder`
*
*```html
* <form [ng-form-model]="myForm">
* <ion-segment ng-control="mapStyle" danger>
* <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>
* </form>
* ```
* @see {@link /docs/v2/components#segment Segment Component Docs}
* @see {@link /docs/v2/api/components/segment/Segment/ Segment API Docs}
*/
@Directive({
selector: 'ion-segment-button',
inputs: [

5
ionic/components/switch/switch.ts
View File

@ -39,7 +39,10 @@ class MediaSwitch {
* Switches can also have colors assigned to them, by adding any color attribute to them.
*
* See the [Angular 2 Docs](https://angular.io/docs/js/latest/api/forms/) for more info on forms and input.
*
* @property {any} [value] - the inital value of the switch
* @property {boolean} [checked] - whether the switch it toggled or not
* @property {boolean} [disabled] - whether the switch is disabled or not
* @property {string} [id] - a unique ID for a switch
* @usage
* ```html
* // Create a single switch

3
scripts/docs/templates/common.template.html vendored
View File

@ -10,7 +10,8 @@ header_sub_title: "<$ doc.docType | capital $> in module <$ doc.module $>"
doc: "<$ doc.name $>"
docType: "<$ doc.docType $>"
<@ if doc.demo @>show_preview_device: true
preview_device_url: "<$ doc.demo $>"<@ endif @>
preview_device_url: "<$ doc.demo $>"
angular_controller: APIDemoCtrl <@ endif @>
---