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

Update demo for grouping and item sticky elements

Browse Source
This commit is contained in:
jbavari
2015-10-09 11:22:43 -06:00
parent f98edb4642
commit e9a7eabf9b
4 changed files with 45 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
ionic/components/item/test/groups/component-list.html Normal file
View File

@ -0,0 +1,17 @@
<ion-list>
<ion-item-group class="outer-content">
<ion-item-group-title>
{{data.day}} - Sessions
</ion-item-group-title>
<ion-item-sliding *ng-for="#session of data.sessions">
<h3>{{session.name}}</h3>
<p>
<span>{{session.location}}</span>
</p>
<ion-item-options>
<button primary>Speaker Info</button>
<button secondary>Add to <br>Favorites</button>
</ion-item-options>
</ion-item-sliding>
</ion-item-group>
</ion-list>

39
ionic/components/item/test/groups/index.ts
View File

@ -1,31 +1,42 @@
import {Host} from 'angular2/angular2';
import {App} from 'ionic/ionic';
import {ElementRef, Host} from 'angular2/angular2';
import {Component, View, NgIf, NgFor} from 'angular2/angular2';
import {Content, Icon, Item, ItemGroup, ItemGroupTitle, ItemSliding, List, ListHeader, NavController} from 'ionic/ionic';
console.log('content', Content)
import {App, Content, Icon, Item, ItemGroup, ItemGroupTitle, ItemSliding, List, ListHeader, NavController} from 'ionic/ionic';
@Component({
properties: ['data'],
selector: 'component-list'
})
@View({
directives: [ComponentList, Item, ItemGroup, ItemGroupTitle, List, NgIf, NgFor],
templateUrl: 'list.html'
selector: 'component-list',
directives: [ComponentList, Item, ItemGroup, ItemGroupTitle, ItemSliding, List, NgIf, NgFor],
templateUrl: 'component-list.html'
})
class ComponentList {
constructor(@Host() content:Content) {
constructor(elementRef: ElementRef, @Host() content:Content) {
console.log('Component List init', content);
}
}
@App({
directives: [ComponentList, Item, ItemGroup, ItemGroupTitle, List, NgIf, NgFor],
directives: [Content, ComponentList, Item, ItemGroup, ItemGroupTitle, ItemSliding, List, NgIf, NgFor],
templateUrl: 'main.html'
})
class E2EApp {
constructor() {
this.data = ['1'];
let session = {
"name": "Breakfast",
"location": "Main hallway"
};
this.data = {
"day": "05/17/2016",
"sessions": [
{
"name": "Breakfast",
"location": "Main hallway"
}
]
};
for(let i = 0; i < 50; i++) {
this.data.sessions.push(session);
}
}
}

19
ionic/components/item/test/groups/list.html
View File

@ -1,19 +0,0 @@
<ion-content class="outer-content">
<ion-list>
<ion-item-group class="outer-content" *ng-for="#timeSlot of data">
<ion-item-group-title>
{{timeSlot.time}}
</ion-item-group-title>
<ion-item *ng-for="#session of timeSlot.talks">
<h3>{{session.name}}</h3>
<p>
<span>{{session.location}}</span>
</p>
<ion-item-options>
<button primary (click)="openSession(session, $this)">Speaker Info</button>
<button secondary (click)="addFavorite(timeSlot, session, $event)">Add to <br>Favorites</button>
</ion-item-options>
</ion-item>
</ion-item-group>
</ion-list>
</ion-content>

9
ionic/components/item/test/groups/main.html
View File

@ -1,7 +1,4 @@
<ion-content class="outer-content">
<div *ng-if="data.length > 0">
<component-list [data]="data"></component-list>
</div>
<div *ng-if="data.length == 0"><h4>No Items</h4></div>
<ion-content class="outer-content content-selected">
<h4>Component List</h4>
<component-list [data]="data"></component-list>
</ion-content>