mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
chore(build): rename ionic directory to src and update all references in the build process.
This commit is contained in:
Josh Thomas
230
src/components/grid/grid.scss
Normal file
230
src/components/grid/grid.scss
Normal file
@@ -0,0 +1,230 @@
|
||||
@import "../../globals.core";
|
||||
|
||||
// Grid
|
||||
// --------------------------------------------------
|
||||
// Using flexbox for the grid, inspired by Philip Walton:
|
||||
// http://philipwalton.github.io/solved-by-flexbox/demos/grids/
|
||||
// By default each .col within a .row will evenly take up
|
||||
// available width, and the height of each .col with take
|
||||
// up the height of the tallest .col in the same .row.
|
||||
|
||||
|
||||
$grid-padding-width: 10px !default;
|
||||
$grid-responsive-sm-break: 567px !default; // smaller than landscape phone
|
||||
$grid-responsive-md-break: 767px !default; // smaller than portrait tablet
|
||||
$grid-responsive-lg-break: 1023px !default; // smaller than landscape tablet
|
||||
|
||||
@mixin responsive-grid-break($selector, $max-width) {
|
||||
@media (max-width: $max-width) {
|
||||
#{$selector} {
|
||||
flex-direction: column;
|
||||
|
||||
ion-col {
|
||||
&[width-10],
|
||||
&[width-20],
|
||||
&[width-25],
|
||||
&[width-33],
|
||||
&[width-34],
|
||||
&[width-50],
|
||||
&[width-66],
|
||||
&[width-67],
|
||||
&[width-75],
|
||||
&[width-80],
|
||||
&[width-90] {
|
||||
flex: 1;
|
||||
|
||||
margin-bottom: ($grid-padding-width * 3) / 2;
|
||||
margin-left: 0;
|
||||
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ion-grid {
|
||||
display: flex;
|
||||
|
||||
flex-direction: column;
|
||||
|
||||
padding: ($grid-padding-width / 2);
|
||||
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
ion-row {
|
||||
display: flex;
|
||||
|
||||
width: 100%;
|
||||
|
||||
&[wrap] {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
&[top] {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
&[bottom] {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
&[center] {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&[stretch] {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
&[baseline] {
|
||||
align-items: baseline;
|
||||
}
|
||||
}
|
||||
|
||||
ion-col {
|
||||
display: block;
|
||||
|
||||
flex: 1;
|
||||
|
||||
padding: ($grid-padding-width / 2);
|
||||
|
||||
width: 100%;
|
||||
|
||||
// Column Alignment
|
||||
|
||||
&[top] {
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
&[bottom] {
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
&[center] {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
&[stretch] {
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
&[baseline] {
|
||||
align-self: baseline;
|
||||
}
|
||||
|
||||
// Column Offsets
|
||||
|
||||
&[offset-10] {
|
||||
margin-left: 10%;
|
||||
}
|
||||
|
||||
&[offset-20] {
|
||||
margin-left: 20%;
|
||||
}
|
||||
|
||||
&[offset-25] {
|
||||
margin-left: 25%;
|
||||
}
|
||||
|
||||
&[offset-33],
|
||||
&[offset-34] {
|
||||
margin-left: 33.3333%;
|
||||
}
|
||||
|
||||
&[offset-50] {
|
||||
margin-left: 50%;
|
||||
}
|
||||
|
||||
&[offset-66],
|
||||
&[offset-67] {
|
||||
margin-left: 66.6666%;
|
||||
}
|
||||
|
||||
&[offset-75] {
|
||||
margin-left: 75%;
|
||||
}
|
||||
|
||||
&[offset-80] {
|
||||
margin-left: 80%;
|
||||
}
|
||||
|
||||
&[offset-90] {
|
||||
margin-left: 90%;
|
||||
}
|
||||
|
||||
// Explicit Column Percent Sizes
|
||||
// By default each grid column will evenly distribute
|
||||
// across the grid. However, you can specify individual
|
||||
// columns to take up a certain size of the available area
|
||||
|
||||
&[width-10] {
|
||||
flex: 0 0 10%;
|
||||
|
||||
max-width: 10%;
|
||||
}
|
||||
|
||||
&[width-20] {
|
||||
flex: 0 0 20%;
|
||||
|
||||
max-width: 20%;
|
||||
}
|
||||
|
||||
&[width-25] {
|
||||
flex: 0 0 25%;
|
||||
|
||||
max-width: 25%;
|
||||
}
|
||||
|
||||
&[width-33],
|
||||
&[width-34] {
|
||||
flex: 0 0 33.3333%;
|
||||
|
||||
max-width: 33.3333%;
|
||||
}
|
||||
|
||||
&[width-50] {
|
||||
flex: 0 0 50%;
|
||||
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
&[width-66],
|
||||
&[width-67] {
|
||||
flex: 0 0 66.6666%;
|
||||
|
||||
max-width: 66.6666%;
|
||||
}
|
||||
|
||||
&[width-75] {
|
||||
flex: 0 0 75%;
|
||||
|
||||
max-width: 75%;
|
||||
}
|
||||
|
||||
&[width-80] {
|
||||
flex: 0 0 80%;
|
||||
|
||||
max-width: 80%;
|
||||
}
|
||||
|
||||
&[width-90] {
|
||||
flex: 0 0 90%;
|
||||
|
||||
max-width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Responsive Grid Classes
|
||||
// Adding a class of responsive-X to a row
|
||||
// will trigger the width-direction to
|
||||
// change to column and add some margin
|
||||
// to any columns in the row for clearity
|
||||
|
||||
@include responsive-grid-break('[responsive-sm]', $grid-responsive-sm-break);
|
||||
@include responsive-grid-break('[responsive-md]', $grid-responsive-md-break);
|
||||
@include responsive-grid-break('[responsive-lg]', $grid-responsive-lg-break);
|
||||
7
src/components/grid/test/alignment/index.ts
Normal file
7
src/components/grid/test/alignment/index.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
import {App} from '../../../../../ionic';
|
||||
|
||||
|
||||
@App({
|
||||
templateUrl: 'main.html'
|
||||
})
|
||||
class E2EApp {}
|
||||
71
src/components/grid/test/alignment/main.html
Normal file
71
src/components/grid/test/alignment/main.html
Normal file
@@ -0,0 +1,71 @@
|
||||
<ion-toolbar><ion-title>Grid Alignment</ion-title></ion-toolbar>
|
||||
|
||||
<ion-content class="alignment-demo">
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
ion-col
|
||||
</ion-col>
|
||||
<ion-col text-right>
|
||||
ion-col[text-right]
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row text-center>
|
||||
<ion-col>
|
||||
ion-row[text-center]
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
ion-row[text-center]
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
ion-row[text-center]
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col text-left>
|
||||
ion-col[text-left]
|
||||
</ion-col>
|
||||
<ion-col text-left>
|
||||
ion-col[text-left]
|
||||
</ion-col>
|
||||
<ion-col text-right>
|
||||
ion-col[text-right]
|
||||
</ion-col>
|
||||
<ion-col text-right>
|
||||
ion-col[text-right]
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
<button small>Button 1</button>
|
||||
</ion-col>
|
||||
<ion-col width-50 text-center>
|
||||
<button small>Button 2</button>
|
||||
<button small>Button 3</button>
|
||||
</ion-col>
|
||||
<ion-col text-right>
|
||||
<button small>Button 4</button>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
<button small>Button 1</button>
|
||||
<button small>Button 2</button>
|
||||
</ion-col>
|
||||
<ion-col text-right>
|
||||
<button small>Button 3</button>
|
||||
<button small>Button 4</button>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
</ion-content>
|
||||
|
||||
<style>
|
||||
.alignment-demo ion-row {
|
||||
border: 1px solid #ddd;
|
||||
margin: 10px 0;
|
||||
}
|
||||
</style>
|
||||
0
src/components/grid/test/basic/e2e.ts
Normal file
0
src/components/grid/test/basic/e2e.ts
Normal file
7
src/components/grid/test/basic/index.ts
Normal file
7
src/components/grid/test/basic/index.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
import {App} from '../../../../../ionic';
|
||||
|
||||
|
||||
@App({
|
||||
templateUrl: 'main.html'
|
||||
})
|
||||
class E2EApp {}
|
||||
260
src/components/grid/test/basic/main.html
Normal file
260
src/components/grid/test/basic/main.html
Normal file
@@ -0,0 +1,260 @@
|
||||
<ion-toolbar><ion-title>Grid</ion-title></ion-toolbar>
|
||||
|
||||
<ion-content class="grid-demo">
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
<div>
|
||||
ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<div>
|
||||
ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<div>
|
||||
ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<div>
|
||||
ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col width-50>
|
||||
<div>
|
||||
ion-col[width-50]
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<div>
|
||||
ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<div>
|
||||
ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col width-25>
|
||||
<div>
|
||||
ion-col[width-25]
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<div>
|
||||
ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col width-25>
|
||||
<div>
|
||||
ion-col[width-25]
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col width-25>
|
||||
<div>
|
||||
ion-col[width-25]
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col width-25 offset-25>
|
||||
<div>
|
||||
ion-col[width-25][offset-25]
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
<div>
|
||||
ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<div>
|
||||
ion-col<br>#
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<div>
|
||||
ion-col<br>#<br>#
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<div>
|
||||
ion-col<br>#<br>#<br>#
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col top>
|
||||
<div>
|
||||
ion-col[top]
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col center>
|
||||
<div>
|
||||
ion-col[center]
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col bottom>
|
||||
<div>
|
||||
ion-col[bottom]
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<div>
|
||||
ion-col<br>#<br>#
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row top>
|
||||
<ion-col>
|
||||
<div>
|
||||
[top] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<div>
|
||||
[top] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col bottom>
|
||||
<div>
|
||||
[top] ion-col[bottom]
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<div>
|
||||
ion-col<br>#<br>#
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row center>
|
||||
<ion-col>
|
||||
<div>
|
||||
[center] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<div>
|
||||
[center] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<div>
|
||||
[center] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<div>
|
||||
ion-col<br>#<br>#
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row bottom>
|
||||
<ion-col>
|
||||
<div>
|
||||
[bottom] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col top>
|
||||
<div>
|
||||
[bottom] ion-col[top]
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<div>
|
||||
[bottom] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<div>
|
||||
ion-col<br>#<br>#
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row responsive-sm>
|
||||
<ion-col>
|
||||
<div>
|
||||
[responsive-sm] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<div>
|
||||
[responsive-sm] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<div>
|
||||
[responsive-sm] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<div>
|
||||
[responsive-sm] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row responsive-md>
|
||||
<ion-col>
|
||||
<div>
|
||||
[responsive-md] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<div>
|
||||
[responsive-md] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<div>
|
||||
[responsive-md] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<div>
|
||||
[responsive-md] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row responsive-lg>
|
||||
<ion-col width-50 offset-25>
|
||||
<div>
|
||||
[responsive-lg] ion-col[width-50][offset-25]
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col width-25>
|
||||
<div>
|
||||
[responsive-lg] ion-col[width-25]
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
|
||||
</ion-content>
|
||||
|
||||
<style>
|
||||
.grid-demo ion-col div {
|
||||
background-color: #f7f7f7;
|
||||
border: 1px solid #ddd;
|
||||
padding: 10px 5px;
|
||||
}
|
||||
</style>
|
||||
7
src/components/grid/test/full/index.ts
Normal file
7
src/components/grid/test/full/index.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
import {App} from '../../../../../ionic';
|
||||
|
||||
|
||||
@App({
|
||||
templateUrl: 'main.html'
|
||||
})
|
||||
class E2EApp {}
|
||||
60
src/components/grid/test/full/main.html
Normal file
60
src/components/grid/test/full/main.html
Normal file
@@ -0,0 +1,60 @@
|
||||
<ion-toolbar><ion-title>Grid</ion-title></ion-toolbar>
|
||||
|
||||
<ion-content class="grid-full">
|
||||
|
||||
<ion-row>
|
||||
<ion-col class="cell-1">
|
||||
statistics
|
||||
</ion-col>
|
||||
<ion-col class="cell-2">
|
||||
profile
|
||||
</ion-col>
|
||||
<ion-col class="cell-3">
|
||||
photos
|
||||
</ion-col>
|
||||
<ion-col class="cell-4">
|
||||
laboratory
|
||||
</ion-col>
|
||||
<ion-col class="cell-5">
|
||||
calendar
|
||||
</ion-col>
|
||||
<ion-col class="cell-6">
|
||||
alert
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
</ion-content>
|
||||
|
||||
<style>
|
||||
.grid-full ion-row {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.grid-full ion-col {
|
||||
flex: 0 0 50%;
|
||||
max-width: 50%;
|
||||
text-align: center;
|
||||
padding: 10px 5px;
|
||||
}
|
||||
|
||||
.cell-1 {
|
||||
background-color: #C5DCFC;
|
||||
}
|
||||
.cell-2 {
|
||||
background-color: #262B69;
|
||||
}
|
||||
.cell-3 {
|
||||
background-color: #A0C5FA;
|
||||
}
|
||||
.cell-4 {
|
||||
background-color: #B3D0FC;
|
||||
}
|
||||
.cell-5 {
|
||||
background-color: #73A7F9;
|
||||
}
|
||||
.cell-6 {
|
||||
background-color: #8CB9FA;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user