mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 19:21:34 +08:00
Detail and post page
This commit is contained in:
Max Lynch
13
ionic/components/app/test/snapcat/detail.html
Normal file
13
ionic/components/app/test/snapcat/detail.html
Normal file
@ -0,0 +1,13 @@
|
||||
<ion-navbar *navbar id="p2toolbar"><ion-title>Post</ion-title></ion-navbar>
|
||||
|
||||
<ion-content>
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
{{post.text}}
|
||||
</div>
|
||||
<img src="{{post.image}}">
|
||||
<div class="card-footer">
|
||||
Posted {{post.day}} ago
|
||||
</div>
|
||||
</div>
|
||||
</ion-content>
|
||||
14
ionic/components/app/test/snapcat/feed.html
Normal file
14
ionic/components/app/test/snapcat/feed.html
Normal file
@ -0,0 +1,14 @@
|
||||
<ion-navbar *navbar id="p2toolbar"><ion-title>Feed</ion-title></ion-navbar>
|
||||
|
||||
<ion-content>
|
||||
|
||||
<div class="card" *ng-for="#post of posts" (^click)="postClicked($event, post)">
|
||||
<div class="card-content">
|
||||
{{post.text}}
|
||||
</div>
|
||||
<img src="{{post.image}}">
|
||||
<div class="card-footer">
|
||||
Posted {{post.day}} ago
|
||||
</div>
|
||||
</div>
|
||||
</ion-content>
|
||||
@ -1,27 +1,81 @@
|
||||
import {bootstrap} from 'angular2/angular2'
|
||||
import {bootstrap, NgFor} from 'angular2/angular2'
|
||||
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
|
||||
import {View} from 'angular2/src/core/annotations_impl/view';
|
||||
import {FormBuilder, Control, ControlGroup, Validators, formDirectives} from 'angular2/forms';
|
||||
|
||||
import {Nav, Segment, SegmentButton, Slides, Slide, Content, Button, List, Item} from 'ionic/ionic';
|
||||
import {NavController, NavbarTemplate, NavParams, Navbar} from 'ionic/ionic';
|
||||
|
||||
@Component({ selector: 'ion-app' })
|
||||
@Component({ selector: 'ion-view' })
|
||||
@View({
|
||||
templateUrl: 'main.html',
|
||||
directives: [formDirectives, Nav, Segment, SegmentButton, Slides, Slide, Content, Button, List, Item]
|
||||
templateUrl: 'detail.html',
|
||||
directives: [formDirectives, NavbarTemplate, Navbar, Content, Button, List, Item]
|
||||
})
|
||||
export class IonicApp {
|
||||
constructor() {
|
||||
export class DetailPage {
|
||||
constructor(params: NavParams) {
|
||||
this.post = params.post;
|
||||
}
|
||||
}
|
||||
|
||||
@Component({ selector: 'ion-view' })
|
||||
@View({
|
||||
templateUrl: 'feed.html',
|
||||
directives: [formDirectives, NgFor, NavbarTemplate, Navbar, Segment, SegmentButton, Content, Button, List, Item]
|
||||
})
|
||||
export class FeedPage {
|
||||
constructor(nav: NavController) {
|
||||
this.nav = nav;
|
||||
|
||||
this.filterForm = new ControlGroup({
|
||||
filterControl: new Control("")
|
||||
});
|
||||
/*
|
||||
var fb = new FormBuilder();
|
||||
this.form = fb.group({
|
||||
filter: ['new']
|
||||
|
||||
this.posts = [
|
||||
{
|
||||
text: 'I tried to keep both arts alive, but the camera won. I found that while the camera does not express the soul, perhaps a photograph can!',
|
||||
image: 'http://ionic-io-assets.s3.amazonaws.com/images/p.jpg',
|
||||
day: 5
|
||||
},
|
||||
{
|
||||
text: 'It is good to realize that if love and peace can prevail on earth, and if we can teach our children to honor nature\'s gifts, the joys and beauties of the outdoors will be here forever.',
|
||||
image: 'http://ionic-io-assets.s3.amazonaws.com/images/p1.png',
|
||||
day: 6
|
||||
},
|
||||
{
|
||||
text: 'I see humanity now as one vast plant, needing for its highest fulfillment only love, the natural blessings of the great outdoors, and intelligent crossing and selection.',
|
||||
image: 'http://ionic-io-assets.s3.amazonaws.com/images/p2.png',
|
||||
day: 7
|
||||
},
|
||||
{
|
||||
text: 'You must not lose faith in humanity. Humanity is an ocean; if a few drops of the ocean are dirty, the ocean does not become dirty.',
|
||||
image: 'http://ionic-io-assets.s3.amazonaws.com/images/p3.png',
|
||||
day: 7
|
||||
},
|
||||
{
|
||||
text: 'Keep close to Nature\'s heart... and break clear away, once in awhile, and climb a mountain or spend a week in the woods. Wash your spirit clean.',
|
||||
image: 'http://ionic-io-assets.s3.amazonaws.com/images/p4.png',
|
||||
day: 8
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
postClicked(event, post) {
|
||||
console.log('Post clicked');
|
||||
this.nav.push(DetailPage, {
|
||||
post: post
|
||||
});
|
||||
*/
|
||||
event.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
@Component({ selector: 'ion-app' })
|
||||
@View({
|
||||
templateUrl: 'main.html',
|
||||
directives: [formDirectives, Nav, Slides, Slide, Content, Button, List, Item]
|
||||
})
|
||||
export class IonicApp {
|
||||
constructor() {
|
||||
this.feedPage = FeedPage
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
<ion-slides >
|
||||
<ion-slides>
|
||||
|
||||
<ion-slide>
|
||||
|
||||
<ion-view>
|
||||
|
||||
<ion-toolbar id="p1toolbar">
|
||||
@ -20,78 +22,12 @@
|
||||
</ion-content>
|
||||
|
||||
</ion-view>
|
||||
|
||||
</ion-slide>
|
||||
|
||||
<ion-slide>
|
||||
<ion-view>
|
||||
|
||||
<ion-toolbar id="p2toolbar">
|
||||
<div class="toolbar-inner" [control-group]="filterForm">
|
||||
<ion-title>feed</ion-title>
|
||||
<!--
|
||||
<ion-segment control="filterControl">
|
||||
<ion-segment-button value="new" ion-button>
|
||||
New
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="best" ion-button>
|
||||
Best
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
-->
|
||||
</div>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-content>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
I tried to keep both arts alive, but the camera won. I found that while the camera does not express the soul, perhaps a photograph can!
|
||||
</div>
|
||||
<img src="http://ionic-io-assets.s3.amazonaws.com/images/p.jpg">
|
||||
<div class="card-footer">
|
||||
Posted 5 days ago
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
It is good to realize that if love and peace can prevail on earth, and if we can teach our children to honor nature's gifts, the joys and beauties of the outdoors will be here forever.
|
||||
</div>
|
||||
<img src="http://ionic-io-assets.s3.amazonaws.com/images/p1.png">
|
||||
<div class="card-footer">
|
||||
Posted 6 days ago
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
I see humanity now as one vast plant, needing for its highest fulfillment only love, the natural blessings of the great outdoors, and intelligent crossing and selection.
|
||||
</div>
|
||||
<img src="http://ionic-io-assets.s3.amazonaws.com/images/p2.png">
|
||||
<div class="card-footer">
|
||||
Posted 7 days ago
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
You must not lose faith in humanity. Humanity is an ocean; if a few drops of the ocean are dirty, the ocean does not become dirty.
|
||||
</div>
|
||||
<img src="http://ionic-io-assets.s3.amazonaws.com/images/p3.png">
|
||||
<div class="card-footer">
|
||||
Posted 7 days ago
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain or spend a week in the woods. Wash your spirit clean.
|
||||
</div>
|
||||
<img src="http://ionic-io-assets.s3.amazonaws.com/images/p4.png">
|
||||
<div class="card-footer">
|
||||
Posted 8 days ago
|
||||
</div>
|
||||
</div>
|
||||
</ion-content>
|
||||
<ion-nav [initial]="feedPage"></ion-nav>
|
||||
|
||||
</ion-view>
|
||||
</ion-slide>
|
||||
|
||||
@ -127,7 +127,7 @@ Platform.register({
|
||||
}
|
||||
},
|
||||
run() {
|
||||
//Tap.run();
|
||||
Tap.run();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user