mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 19:57:22 +08:00
59 lines
1.5 KiB
JavaScript
59 lines
1.5 KiB
JavaScript
import {NgFor, Injector, DomRenderer, ElementRef} from 'angular2/angular2';
|
|
import {Ancestor} from 'angular2/src/core/annotations_impl/visibility';
|
|
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
|
|
import {View} from 'angular2/src/core/annotations_impl/view';
|
|
|
|
import {List, Item, ActionMenu, Modal, ModalRef,
|
|
NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
|
|
|
|
@Component({
|
|
selector: 'ion-view'
|
|
})
|
|
@View({
|
|
template: `
|
|
<ion-navbar *navbar><ion-title>Cards</ion-title></ion-navbar>
|
|
|
|
<ion-content class="padding">
|
|
<h2>Cards</h2>
|
|
<p>
|
|
Cards are an emerging UI concept where a bit of content is displayed
|
|
like it would be on an index card or a piece of paper.
|
|
</p>
|
|
<p>
|
|
Cards are great for displaying contextual information in a small space,
|
|
like a Tweet, today's weather report, or a photo.
|
|
</p>
|
|
<div class="card">
|
|
|
|
<div class="item card-header">
|
|
<div class="item-content">
|
|
<div class="item-label">
|
|
Card Header
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item">
|
|
<div class="item-media">
|
|
<img src="http://i.imgur.com/7BEPcGo.jpg">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item card-footer">
|
|
<div class="item-content">
|
|
<div class="item-label">
|
|
Card Footer
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</ion-content>
|
|
`,
|
|
directives: [NavbarTemplate, Navbar, Content, List, Item]
|
|
})
|
|
export class CardPage {
|
|
constructor() {
|
|
}
|
|
}
|