docs(demos): add grid example

Closes #536
This commit is contained in:
Drew Rygh
2015-11-17 11:19:20 -06:00
parent d1a198c1b6
commit cfa15b47ed
6 changed files with 94 additions and 0 deletions

View File

@ -14,6 +14,7 @@ $font-path: '../../dist/fonts';
@import "cards/background/styles"; @import "cards/background/styles";
@import "cards/advanced-weather/styles"; @import "cards/advanced-weather/styles";
@import "cards/advanced-map/styles"; @import "cards/advanced-map/styles";
@import "grid/basic/styles";
@import "icons/basic/styles"; @import "icons/basic/styles";
@import "menus/basic/styles"; @import "menus/basic/styles";
@import "slides/basic/styles"; @import "slides/basic/styles";

View File

@ -0,0 +1,13 @@
import {Page} from 'ionic/ionic';
import {forwardRef} from 'angular2/angular2';
import {AndroidAttribute} from '../../helpers';
@Page({
templateUrl: 'grid/basic/template.html',
directives: [forwardRef(() => AndroidAttribute)]
})
export class BasicPage {
constructor() {
}
}

View File

@ -0,0 +1,11 @@
.grid-page {
ion-col div {
background-color: #F9FAFB;
padding: 5px;
border: 1px solid #ddd;
border-radius: 2px;
text-align: center;
}
}

View File

@ -0,0 +1,66 @@
<ion-navbar *navbar hide-back-button class="show-navbar android-attr">
<ion-title>Grid</ion-title>
</ion-navbar>
<ion-content class="has-header grid-page">
<ion-row>
<ion-col><div>col</div></ion-col>
<ion-col><div>col</div></ion-col>
<ion-col><div>col</div></ion-col>
<ion-col>
<div>
col<br>
3 lines<br>
of text<br>
</div>
</ion-col>
</ion-row>
<ion-row center>
<ion-col><div>col</div></ion-col>
<ion-col><div>col</div></ion-col>
<ion-col><div>col</div></ion-col>
<ion-col>
<div>
col<br>
3 lines<br>
center<br>
</div>
</ion-col>
</ion-row>
<ion-row center>
<ion-col class="col-offset-25"><div>col</div></ion-col>
<ion-col><div>col</div></ion-col>
<ion-col>
<div>
col<br>
3 lines<br>
center<br>
</div>
</ion-col>
</ion-row>
<ion-row baseline>
<ion-col class="col-offset-50"><div>col</div></ion-col>
<ion-col>
<div>
col<br>
3 lines<br>
baseline<br>
</div>
</ion-col>
</ion-row>
<ion-row baseline>
<ion-col class="col-offset-75">
<div>
col<br>
2 lines<br>
</div>
</ion-col>
</ion-row>
</ion-content>

View File

@ -0,0 +1 @@
export * from './basic/pages';

View File

@ -4,6 +4,7 @@ import {Platform, Navbar} from 'ionic/ionic';
import * as actionSheets from './action-sheets/action-sheets'; import * as actionSheets from './action-sheets/action-sheets';
import * as buttons from './buttons/buttons'; import * as buttons from './buttons/buttons';
import * as cards from './cards/cards'; import * as cards from './cards/cards';
import * as grid from './grid/grid';
import * as labels from './labels/labels'; import * as labels from './labels/labels';
import * as icons from './icons/icons'; import * as icons from './icons/icons';
import * as inputs from './inputs/inputs'; import * as inputs from './inputs/inputs';
@ -108,6 +109,7 @@ export function getPageFor(hash) {
'stacked-labels': labels.StackedPage, 'stacked-labels': labels.StackedPage,
'icons': icons.BasicPage, 'icons': icons.BasicPage,
'grid': grid.BasicPage,
'lists': lists.BasicPage, 'lists': lists.BasicPage,
'list-lines': lists.BasicPage, 'list-lines': lists.BasicPage,