mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 12:29:55 +08:00
docs(demos): prettify list demo and remove unnecessary/unused files
references #5311
This commit is contained in:
Brandy Carney
@ -1,24 +0,0 @@
|
|||||||
<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 *ngFor="#p of pages" (click)="openPage(p)">
|
|
||||||
{{p.title}}
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button ion-item menuClose="leftMenu" detail-none>
|
|
||||||
Close Menu
|
|
||||||
</button>
|
|
||||||
|
|
||||||
</ion-list>
|
|
||||||
</ion-content>
|
|
||||||
|
|
||||||
</ion-menu>
|
|
||||||
|
|
||||||
<ion-nav id="nav" [root]="rootPage" #content></ion-nav>
|
|
||||||
@ -1,85 +0,0 @@
|
|||||||
|
|
||||||
<ion-navbar *navbar class="show-navbar">
|
|
||||||
|
|
||||||
<button menuToggle="leftMenu">
|
|
||||||
<ion-icon menu></ion-icon>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<ion-title>
|
|
||||||
Basic List
|
|
||||||
</ion-title>
|
|
||||||
|
|
||||||
</ion-navbar>
|
|
||||||
|
|
||||||
<ion-content class="outer-content">
|
|
||||||
|
|
||||||
<ion-list>
|
|
||||||
|
|
||||||
<ion-list-header>
|
|
||||||
List Header
|
|
||||||
</ion-list-header>
|
|
||||||
|
|
||||||
<ion-item>
|
|
||||||
<ion-icon name="wifi" item-left></ion-icon>
|
|
||||||
<ion-label>Wifi</ion-label>
|
|
||||||
<ion-toggle></ion-toggle>
|
|
||||||
</ion-item>
|
|
||||||
|
|
||||||
<ion-item>
|
|
||||||
<ion-icon name="heart" item-left></ion-icon>
|
|
||||||
Affection
|
|
||||||
<ion-note item-right>
|
|
||||||
Very Little
|
|
||||||
</ion-note>
|
|
||||||
</ion-item>
|
|
||||||
|
|
||||||
<ion-item>
|
|
||||||
<ion-icon name="home" item-left></ion-icon>
|
|
||||||
Home
|
|
||||||
<ion-note item-right>
|
|
||||||
Where the heart is
|
|
||||||
</ion-note>
|
|
||||||
</ion-item>
|
|
||||||
|
|
||||||
<ion-item>
|
|
||||||
<ion-icon name="color-wand" item-left></ion-icon>
|
|
||||||
<ion-label>Magic</ion-label>
|
|
||||||
<ion-toggle secondary checked="true"></ion-toggle>
|
|
||||||
</ion-item>
|
|
||||||
|
|
||||||
<ion-item>
|
|
||||||
<ion-icon name="star" item-left></ion-icon>
|
|
||||||
Star status
|
|
||||||
<ion-note item-right>
|
|
||||||
Super
|
|
||||||
</ion-note>
|
|
||||||
</ion-item>
|
|
||||||
|
|
||||||
<ion-item>
|
|
||||||
<ion-icon name="pizza" item-left></ion-icon>
|
|
||||||
Pizza
|
|
||||||
<ion-note item-right>
|
|
||||||
Always
|
|
||||||
</ion-note>
|
|
||||||
</ion-item>
|
|
||||||
|
|
||||||
<ion-item>
|
|
||||||
<ion-icon name="beer" item-left></ion-icon>
|
|
||||||
Beer
|
|
||||||
<ion-note item-right>
|
|
||||||
Yes Plz
|
|
||||||
</ion-note>
|
|
||||||
</ion-item>
|
|
||||||
|
|
||||||
<ion-item>
|
|
||||||
<ion-icon name="wine" item-left></ion-icon>
|
|
||||||
Wine
|
|
||||||
<ion-note item-right>
|
|
||||||
All the time
|
|
||||||
</ion-note>
|
|
||||||
</ion-item>
|
|
||||||
|
|
||||||
</ion-list>
|
|
||||||
|
|
||||||
|
|
||||||
</ion-content>
|
|
||||||
@ -1,71 +1,9 @@
|
|||||||
import {App, IonicApp, Page, Platform} from 'ionic/ionic';
|
import {App} from 'ionic/ionic';
|
||||||
|
|
||||||
|
|
||||||
@App({
|
@App({
|
||||||
templateUrl: 'app.html'
|
templateUrl: 'main.html'
|
||||||
})
|
})
|
||||||
class ApiDemoApp {
|
class ApiDemoApp {
|
||||||
|
constructor() { }
|
||||||
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() {
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,83 +0,0 @@
|
|||||||
|
|
||||||
<ion-navbar *navbar class="show-navbar">
|
|
||||||
|
|
||||||
<button menuToggle="leftMenu">
|
|
||||||
<ion-icon name="menu"></ion-icon>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<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-toggle>
|
|
||||||
<ion-icon name="wifi" item-left></ion-icon>
|
|
||||||
Wifi
|
|
||||||
</ion-toggle>
|
|
||||||
|
|
||||||
<ion-item>
|
|
||||||
<ion-icon name="heart" item-left></ion-icon>
|
|
||||||
Affection
|
|
||||||
<ion-note item-right>
|
|
||||||
Very Little
|
|
||||||
</ion-note>
|
|
||||||
</ion-item>
|
|
||||||
|
|
||||||
<ion-item>
|
|
||||||
<ion-icon name="home" item-left></ion-icon>
|
|
||||||
Home
|
|
||||||
<ion-note item-right>
|
|
||||||
Where the heart is
|
|
||||||
</ion-note>
|
|
||||||
</ion-item>
|
|
||||||
|
|
||||||
<ion-toggle checked="true">
|
|
||||||
<ion-icon name="color-wand" item-left></ion-icon>
|
|
||||||
Magic
|
|
||||||
</ion-toggle>
|
|
||||||
|
|
||||||
<ion-item>
|
|
||||||
<ion-icon name="star" item-left></ion-icon>
|
|
||||||
Star status
|
|
||||||
<ion-note item-right>
|
|
||||||
Super
|
|
||||||
</ion-note>
|
|
||||||
</ion-item>
|
|
||||||
|
|
||||||
<ion-item>
|
|
||||||
<ion-icon name="pizza" item-left></ion-icon>
|
|
||||||
Pizza
|
|
||||||
<ion-note item-right>
|
|
||||||
Always
|
|
||||||
</ion-note>
|
|
||||||
</ion-item>
|
|
||||||
|
|
||||||
<ion-item>
|
|
||||||
<ion-icon name="beer" item-left></ion-icon>
|
|
||||||
Beer
|
|
||||||
<ion-note item-right>
|
|
||||||
Yes Plz
|
|
||||||
</ion-note>
|
|
||||||
</ion-item>
|
|
||||||
|
|
||||||
<ion-item>
|
|
||||||
<ion-icon name="wine" item-left></ion-icon>
|
|
||||||
Wine
|
|
||||||
<ion-note item-right>
|
|
||||||
All the time
|
|
||||||
</ion-note>
|
|
||||||
</ion-item>
|
|
||||||
|
|
||||||
</ion-list>
|
|
||||||
|
|
||||||
|
|
||||||
</ion-content>
|
|
||||||
@ -1,37 +0,0 @@
|
|||||||
|
|
||||||
<ion-navbar *navbar class="show-navbar">
|
|
||||||
|
|
||||||
<button menuToggle="leftMenu">
|
|
||||||
<ion-icon name="menu"></ion-icon>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
73
demos/list/main.html
Normal file
73
demos/list/main.html
Normal file
@ -0,0 +1,73 @@
|
|||||||
|
|
||||||
|
<ion-toolbar>
|
||||||
|
<ion-title>List</ion-title>
|
||||||
|
</ion-toolbar>
|
||||||
|
|
||||||
|
<ion-content class="outer-content">
|
||||||
|
<ion-list>
|
||||||
|
<ion-list-header>
|
||||||
|
Settings
|
||||||
|
</ion-list-header>
|
||||||
|
|
||||||
|
<ion-item>
|
||||||
|
<ion-icon name="plane" item-left danger></ion-icon>
|
||||||
|
<ion-label>Airplane Mode</ion-label>
|
||||||
|
<ion-toggle secondary></ion-toggle>
|
||||||
|
</ion-item>
|
||||||
|
|
||||||
|
<button ion-item>
|
||||||
|
<ion-icon name="wifi" item-left primary></ion-icon>
|
||||||
|
<ion-label>Wi-Fi</ion-label>
|
||||||
|
<ion-note item-right>The Interwebz</ion-note>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button ion-item>
|
||||||
|
<ion-icon name="bluetooth" item-left primary></ion-icon>
|
||||||
|
<ion-label>Bluetooth</ion-label>
|
||||||
|
<ion-note item-right>Off</ion-note>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button ion-item>
|
||||||
|
<ion-icon name="call" item-left secondary></ion-icon>
|
||||||
|
<ion-label>Cellular</ion-label>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button ion-item>
|
||||||
|
<ion-icon name="link" item-left secondary></ion-icon>
|
||||||
|
<ion-label>Personal Hotspot</ion-label>
|
||||||
|
<ion-note item-right>Off</ion-note>
|
||||||
|
</button>
|
||||||
|
</ion-list>
|
||||||
|
|
||||||
|
<ion-list radio-group>
|
||||||
|
<ion-list-header>
|
||||||
|
Silence Phone
|
||||||
|
</ion-list-header>
|
||||||
|
|
||||||
|
<ion-item>
|
||||||
|
<ion-label dark>Always</ion-label>
|
||||||
|
<ion-radio value="always" checked></ion-radio>
|
||||||
|
</ion-item>
|
||||||
|
<ion-item>
|
||||||
|
<ion-label dark>Only while phone is locked</ion-label>
|
||||||
|
<ion-radio value="locked"></ion-radio>
|
||||||
|
</ion-item>
|
||||||
|
</ion-list>
|
||||||
|
|
||||||
|
<ion-list>
|
||||||
|
<ion-list-header>
|
||||||
|
Apps Installed
|
||||||
|
</ion-list-header>
|
||||||
|
|
||||||
|
<ion-item>
|
||||||
|
<ion-icon name="ionic" item-left primary></ion-icon>
|
||||||
|
<ion-label>Ionic View</ion-label>
|
||||||
|
<button outline item-right>Uninstall</button>
|
||||||
|
</ion-item>
|
||||||
|
<ion-item>
|
||||||
|
<ion-icon name="brush" item-left primary></ion-icon>
|
||||||
|
<ion-label>Ionic Creator</ion-label>
|
||||||
|
<button outline item-right>Uninstall</button>
|
||||||
|
</ion-item>
|
||||||
|
</ion-list>
|
||||||
|
</ion-content>
|
||||||
@ -1,83 +0,0 @@
|
|||||||
|
|
||||||
<ion-navbar *navbar class="show-navbar">
|
|
||||||
|
|
||||||
<button menuToggle="leftMenu">
|
|
||||||
<ion-icon name="menu"></ion-icon>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<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-toggle>
|
|
||||||
<ion-icon name="wifi" item-left></ion-icon>
|
|
||||||
Wifi
|
|
||||||
</ion-toggle>
|
|
||||||
|
|
||||||
<ion-item>
|
|
||||||
<ion-icon name="heart" item-left></ion-icon>
|
|
||||||
Affection
|
|
||||||
<ion-note item-right>
|
|
||||||
Very Little
|
|
||||||
</ion-note>
|
|
||||||
</ion-item>
|
|
||||||
|
|
||||||
<ion-item>
|
|
||||||
<ion-icon name="home" item-left></ion-icon>
|
|
||||||
Home
|
|
||||||
<ion-note item-right>
|
|
||||||
Where the heart is
|
|
||||||
</ion-note>
|
|
||||||
</ion-item>
|
|
||||||
|
|
||||||
<ion-toggle checked="true">
|
|
||||||
<ion-icon name="color-wand" item-left></ion-icon>
|
|
||||||
Magic
|
|
||||||
</ion-toggle>
|
|
||||||
|
|
||||||
<ion-item>
|
|
||||||
<ion-icon name="star" item-left></ion-icon>
|
|
||||||
Star status
|
|
||||||
<ion-note item-right>
|
|
||||||
Super
|
|
||||||
</ion-note>
|
|
||||||
</ion-item>
|
|
||||||
|
|
||||||
<ion-item>
|
|
||||||
<ion-icon name="pizza" item-left></ion-icon>
|
|
||||||
Pizza
|
|
||||||
<ion-note item-right>
|
|
||||||
Always
|
|
||||||
</ion-note>
|
|
||||||
</ion-item>
|
|
||||||
|
|
||||||
<ion-item>
|
|
||||||
<ion-icon name="beer" item-left></ion-icon>
|
|
||||||
Beer
|
|
||||||
<ion-note item-right>
|
|
||||||
Yes Plz
|
|
||||||
</ion-note>
|
|
||||||
</ion-item>
|
|
||||||
|
|
||||||
<ion-item>
|
|
||||||
<ion-icon name="wine" item-left></ion-icon>
|
|
||||||
Wine
|
|
||||||
<ion-note item-right>
|
|
||||||
All the time
|
|
||||||
</ion-note>
|
|
||||||
</ion-item>
|
|
||||||
|
|
||||||
</ion-list>
|
|
||||||
|
|
||||||
|
|
||||||
</ion-content>
|
|
||||||
@ -1,59 +0,0 @@
|
|||||||
|
|
||||||
<ion-navbar *navbar class="show-navbar">
|
|
||||||
|
|
||||||
<button menuToggle="leftMenu">
|
|
||||||
<ion-icon name="menu"></ion-icon>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<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