mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 19:21:34 +08:00
docs(demos/list): list api demo
This commit is contained in:
Drew Rygh
24
demos/list/app.html
Normal file
24
demos/list/app.html
Normal 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>
|
||||
@ -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>
|
||||
@ -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
83
demos/list/inset-list.html
Normal 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
37
demos/list/list-headers.html
Normal 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
83
demos/list/no-lines-list.html
Normal 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
59
demos/list/sliding-items.html
Normal 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>
|
||||
Reference in New Issue
Block a user