mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-09 16:16:41 +08:00
test(components): update tests to use new grid API and adds grid tests
This commit is contained in:
Brandy Carney
@ -1,270 +1,284 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Grid - Basic</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<script src="/dist/ionic.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Grid - Basic</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Grid - Basic</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content id="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-content id="content" class="grid-demo">
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
<ion-col size="3">
|
||||
<div>
|
||||
ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col size="3">
|
||||
<div>
|
||||
ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col size="3">
|
||||
<div>
|
||||
ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col size="3">
|
||||
<div>
|
||||
ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
|
||||
<ion-row>
|
||||
<ion-col col-6>
|
||||
<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-col size="6">
|
||||
<div>
|
||||
ion-col[width-50]
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col size="3">
|
||||
<div>
|
||||
ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col size="3">
|
||||
<div>
|
||||
ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col col-3>
|
||||
<div>
|
||||
ion-col[width-25]
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<div>
|
||||
ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col col-3>
|
||||
<div>
|
||||
ion-col[width-25]
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col size="3">
|
||||
<div>
|
||||
ion-col[width-25]
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<div>
|
||||
ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col size="3">
|
||||
<div>
|
||||
ion-col[width-25]
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col col-3>
|
||||
<div>
|
||||
ion-col[width-25]
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col col-3 offset-3>
|
||||
<div>
|
||||
ion-col[width-25][offset-25]
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col size="3">
|
||||
<div>
|
||||
ion-col[width-25]
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col size="3" offset="3">
|
||||
<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>
|
||||
<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 align-self-start>
|
||||
<div>
|
||||
ion-col[top]
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col align-self-center>
|
||||
<div>
|
||||
ion-col[center]
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col align-self-end>
|
||||
<div>
|
||||
ion-col[bottom]
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<div>
|
||||
ion-col<br>#<br>#
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col align-self-start>
|
||||
<div>
|
||||
ion-col[top]
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col align-self-center>
|
||||
<div>
|
||||
ion-col[center]
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col align-self-end>
|
||||
<div>
|
||||
ion-col[bottom]
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<div>
|
||||
ion-col
|
||||
<br>#
|
||||
<br>#
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row align-items-start>
|
||||
<ion-col>
|
||||
<div>
|
||||
[top] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<div>
|
||||
[top] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col align-self-end>
|
||||
<div>
|
||||
[top] ion-col[bottom]
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<div>
|
||||
ion-col<br>#<br>#
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row align-items-start>
|
||||
<ion-col>
|
||||
<div>
|
||||
[top] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<div>
|
||||
[top] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col align-self-end>
|
||||
<div>
|
||||
[top] ion-col[bottom]
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<div>
|
||||
ion-col
|
||||
<br>#
|
||||
<br>#
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row align-items-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 align-items-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 align-items-end>
|
||||
<ion-col>
|
||||
<div>
|
||||
[bottom] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col align-self-start>
|
||||
<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 align-items-end>
|
||||
<ion-col>
|
||||
<div>
|
||||
[bottom] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col align-self-start>
|
||||
<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>
|
||||
<ion-col col-12 col-sm>
|
||||
<div>
|
||||
[responsive-sm] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col col-12 col-sm>
|
||||
<div>
|
||||
[responsive-sm] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col col-12 col-sm>
|
||||
<div>
|
||||
[responsive-sm] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col col-12 col-sm>
|
||||
<div>
|
||||
[responsive-sm] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col size="12" size-sm>
|
||||
<div>
|
||||
[responsive-sm] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col size="12" size-sm>
|
||||
<div>
|
||||
[responsive-sm] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col size="12" size-sm>
|
||||
<div>
|
||||
[responsive-sm] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col size="12" size-sm>
|
||||
<div>
|
||||
[responsive-sm] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col col-12 col-md>
|
||||
<div>
|
||||
[responsive-md] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col col-12 col-md>
|
||||
<div>
|
||||
[responsive-md] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col col-12 col-md>
|
||||
<div>
|
||||
[responsive-md] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col col-12 col-md>
|
||||
<div>
|
||||
[responsive-md] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col size="12" size-md>
|
||||
<div>
|
||||
[responsive-md] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col size="12" size-md>
|
||||
<div>
|
||||
[responsive-md] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col size="12" size-md>
|
||||
<div>
|
||||
[responsive-md] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col size="12" size-md>
|
||||
<div>
|
||||
[responsive-md] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row responsive-lg>
|
||||
<ion-col col-6 offset-3>
|
||||
<div>
|
||||
[responsive-lg] ion-col[width-50][offset-25]
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col col-3>
|
||||
<div>
|
||||
[responsive-lg] ion-col[width-25]
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
<ion-row responsive-lg>
|
||||
<ion-col size="6" offset="3">
|
||||
<div>
|
||||
[responsive-lg] ion-col[width-50][offset-25]
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col size="3">
|
||||
<div>
|
||||
[responsive-lg] ion-col[width-25]
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
|
||||
</ion-content>
|
||||
</ion-content>
|
||||
|
||||
<style>
|
||||
.grid-demo ion-col div {
|
||||
@ -272,7 +286,9 @@
|
||||
border: 1px solid #ddd;
|
||||
padding: 10px 5px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</ion-app>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
19
core/src/components/grid/test/offsets/e2e.js
Normal file
19
core/src/components/grid/test/offsets/e2e.js
Normal file
@ -0,0 +1,19 @@
|
||||
'use strict';
|
||||
|
||||
const { By, until } = require('selenium-webdriver');
|
||||
const { register, Page, platforms } = require('../../../../../scripts/e2e');
|
||||
|
||||
class E2ETestPage extends Page {
|
||||
constructor(driver, platform) {
|
||||
super(driver, `http://localhost:3333/src/components/grid/test/offsets?ionic:mode=${platform}`);
|
||||
}
|
||||
}
|
||||
|
||||
platforms.forEach(platform => {
|
||||
describe('grid/offsets', () => {
|
||||
register('should init', driver => {
|
||||
const page = new E2ETestPage(driver, platform);
|
||||
return page.navigate('#content');
|
||||
});
|
||||
});
|
||||
});
|
||||
122
core/src/components/grid/test/offsets/index.html
Normal file
122
core/src/components/grid/test/offsets/index.html
Normal file
@ -0,0 +1,122 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Grid - Offsets</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<script src="/dist/ionic.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Grid - Offsets</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content id="content" class="grid-demo">
|
||||
<h2>Push</h2>
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
<ion-col size="1" push="1">
|
||||
<div>
|
||||
ion-col push 3
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col size="1" push="1">
|
||||
<div>
|
||||
ion-col push 2
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
|
||||
<h2>Push and Pull</h2>
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
<ion-col size="9" push="3">
|
||||
<div>
|
||||
ion-col push 3
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col size="3" pull="9">
|
||||
<div>
|
||||
ion-col pull 9
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
<ion-col size="3" size-md="6" push="3" push-md="6">
|
||||
<div>
|
||||
ion-col size="3" size-md="6" push="3" push-md="6"
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col size="9" size-md="6" pull="9" pull-md="6">
|
||||
<div>
|
||||
ion-col size="9" size-md="6" pull="9" pull-md="6"
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
|
||||
<h2>Offset</h2>
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
<ion-col offset="5">
|
||||
<div>
|
||||
ion-col offset=5
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col offset="2">
|
||||
<div>
|
||||
ion-col offset="2"
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
<ion-col id="dynamicOffsetCol" offset="2" offset-md="5">
|
||||
<div>
|
||||
ion-col offset="2" offset-md="5"
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col offset="2" offset-md="5">
|
||||
<div>
|
||||
ion-col offset="2" offset-md="5"
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
|
||||
<ion-button onclick="updateOffset()">Update Offset</ion-button>
|
||||
</ion-content>
|
||||
|
||||
<script>
|
||||
function updateOffset() {
|
||||
var dynamicOffsetCol = document.getElementById('dynamicOffsetCol');
|
||||
var currentOffset = dynamicOffsetCol.offset;
|
||||
dynamicOffsetCol.offset = currentOffset === '2' ? '4' : '2';
|
||||
console.log('Updating offset from ' + currentOffset + ' to ' + dynamicOffsetCol.offset);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.grid-demo ion-col div {
|
||||
background-color: #f7f7f7;
|
||||
border: 1px solid #ddd;
|
||||
padding: 10px 5px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</ion-app>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
19
core/src/components/grid/test/padding/e2e.js
Normal file
19
core/src/components/grid/test/padding/e2e.js
Normal file
@ -0,0 +1,19 @@
|
||||
'use strict';
|
||||
|
||||
const { By, until } = require('selenium-webdriver');
|
||||
const { register, Page, platforms } = require('../../../../../scripts/e2e');
|
||||
|
||||
class E2ETestPage extends Page {
|
||||
constructor(driver, platform) {
|
||||
super(driver, `http://localhost:3333/src/components/grid/test/padding?ionic:mode=${platform}`);
|
||||
}
|
||||
}
|
||||
|
||||
platforms.forEach(platform => {
|
||||
describe('grid/padding', () => {
|
||||
register('should init', driver => {
|
||||
const page = new E2ETestPage(driver, platform);
|
||||
return page.navigate('#content');
|
||||
});
|
||||
});
|
||||
});
|
||||
197
core/src/components/grid/test/padding/index.html
Normal file
197
core/src/components/grid/test/padding/index.html
Normal file
@ -0,0 +1,197 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Grid - Padding</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<script src="/dist/ionic.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Grid - Padding</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content id="content" class="grid-demo">
|
||||
<h2>No Grid Padding</h2>
|
||||
<ion-grid no-padding>
|
||||
<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-grid>
|
||||
|
||||
<h2>No Grid Padding / Nested</h2>
|
||||
<ion-grid no-padding>
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
<div>
|
||||
ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<div>
|
||||
ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
</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-grid>
|
||||
|
||||
<h2>Default Grid Padding</h2>
|
||||
<ion-grid>
|
||||
<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-grid>
|
||||
|
||||
<h2>Custom Grid Padding By Breakpoint</h2>
|
||||
<ion-grid class="custom-grid-padding">
|
||||
<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-grid>
|
||||
|
||||
<h2>Custom Column Padding By Breakpoint</h2>
|
||||
<ion-grid class="custom-column-padding">
|
||||
<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-grid>
|
||||
</ion-content>
|
||||
|
||||
<style>
|
||||
.grid-demo ion-col div {
|
||||
background-color: #f7f7f7;
|
||||
border: 1px solid #ddd;
|
||||
padding: 10px 5px;
|
||||
}
|
||||
|
||||
ion-grid {
|
||||
background: #b9ce4f;
|
||||
}
|
||||
|
||||
.custom-grid-padding {
|
||||
--ion-grid-padding-xs: 0;
|
||||
--ion-grid-padding-sm: 10px;
|
||||
--ion-grid-padding-md: 20px;
|
||||
--ion-grid-padding-lg: 30px;
|
||||
--ion-grid-padding-xl: 40px;
|
||||
}
|
||||
|
||||
.custom-column-padding {
|
||||
--ion-grid-column-padding-xs: 2px;
|
||||
--ion-grid-column-padding-sm: 5px;
|
||||
--ion-grid-column-padding-md: 10px;
|
||||
--ion-grid-column-padding-lg: 15px;
|
||||
--ion-grid-column-padding-xl: 25px;
|
||||
}
|
||||
|
||||
ion-col {
|
||||
background: #e2b863;
|
||||
}
|
||||
|
||||
</style>
|
||||
</ion-app>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,270 +1,285 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Grid</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<script src="/dist/ionic.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Grid</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Grid</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content id="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-content id="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 col-6>
|
||||
<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 size="6">
|
||||
<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 col-3>
|
||||
<div>
|
||||
ion-col[width-25]
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<div>
|
||||
ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col col-3>
|
||||
<div>
|
||||
ion-col[width-25]
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col size="3">
|
||||
<div>
|
||||
ion-col[width-25]
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<div>
|
||||
ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col size="3">
|
||||
<div>
|
||||
ion-col[width-25]
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col col-3>
|
||||
<div>
|
||||
ion-col[width-25]
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col col-3 offset-3>
|
||||
<div>
|
||||
ion-col[width-25][offset-25]
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col size="3">
|
||||
<div>
|
||||
ion-col[width-25]
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col size="3" offset="3">
|
||||
<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>
|
||||
<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 align-self-start>
|
||||
<div>
|
||||
ion-col[top]
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col align-self-center>
|
||||
<div>
|
||||
ion-col[center]
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col align-self-end>
|
||||
<div>
|
||||
ion-col[bottom]
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<div>
|
||||
ion-col<br>#<br>#
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col align-self-start>
|
||||
<div>
|
||||
ion-col[top]
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col align-self-center>
|
||||
<div>
|
||||
ion-col[center]
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col align-self-end>
|
||||
<div>
|
||||
ion-col[bottom]
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<div>
|
||||
ion-col
|
||||
<br>#
|
||||
<br>#
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row align-items-start>
|
||||
<ion-col>
|
||||
<div>
|
||||
[top] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<div>
|
||||
[top] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col align-self-end>
|
||||
<div>
|
||||
[top] ion-col[bottom]
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<div>
|
||||
ion-col<br>#<br>#
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row align-items-start>
|
||||
<ion-col>
|
||||
<div>
|
||||
[top] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<div>
|
||||
[top] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col align-self-end>
|
||||
<div>
|
||||
[top] ion-col[bottom]
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<div>
|
||||
ion-col
|
||||
<br>#
|
||||
<br>#
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row align-items-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 align-items-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 align-items-end>
|
||||
<ion-col>
|
||||
<div>
|
||||
[bottom] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col align-self-start>
|
||||
<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 align-items-end>
|
||||
<ion-col>
|
||||
<div>
|
||||
[bottom] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col align-self-start>
|
||||
<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>
|
||||
<ion-col col-12 col-sm>
|
||||
<div>
|
||||
[responsive-sm] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col col-12 col-sm>
|
||||
<div>
|
||||
[responsive-sm] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col col-12 col-sm>
|
||||
<div>
|
||||
[responsive-sm] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col col-12 col-sm>
|
||||
<div>
|
||||
[responsive-sm] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col size="12" col-sm>
|
||||
<div>
|
||||
[responsive-sm] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col size="12" col-sm>
|
||||
<div>
|
||||
[responsive-sm] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col size="12" col-sm>
|
||||
<div>
|
||||
[responsive-sm] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col size="12" col-sm>
|
||||
<div>
|
||||
[responsive-sm] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col col-12 col-md>
|
||||
<div>
|
||||
[responsive-md] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col col-12 col-md>
|
||||
<div>
|
||||
[responsive-md] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col col-12 col-md>
|
||||
<div>
|
||||
[responsive-md] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col col-12 col-md>
|
||||
<div>
|
||||
[responsive-md] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
<ion-row>
|
||||
<ion-col size="12" col-md>
|
||||
<div>
|
||||
[responsive-md] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col size="12" col-md>
|
||||
<div>
|
||||
[responsive-md] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col size="12" col-md>
|
||||
<div>
|
||||
[responsive-md] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col size="12" col-md>
|
||||
<div>
|
||||
[responsive-md] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row responsive-lg>
|
||||
<ion-col col-6 offset-3>
|
||||
<div>
|
||||
[responsive-lg] ion-col[width-50][offset-25]
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col col-3>
|
||||
<div>
|
||||
[responsive-lg] ion-col[width-25]
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
|
||||
</ion-content>
|
||||
<ion-row responsive-lg>
|
||||
<ion-col size="6" offset="3">
|
||||
<div>
|
||||
[responsive-lg] ion-col[width-50][offset-25]
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col size="3">
|
||||
<div>
|
||||
[responsive-lg] ion-col[width-25]
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
</ion-content>
|
||||
|
||||
<style>
|
||||
.grid-demo ion-col div {
|
||||
@ -272,7 +287,9 @@
|
||||
border: 1px solid #ddd;
|
||||
padding: 10px 5px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</ion-app>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
19
core/src/components/grid/test/sizes/e2e.js
Normal file
19
core/src/components/grid/test/sizes/e2e.js
Normal file
@ -0,0 +1,19 @@
|
||||
'use strict';
|
||||
|
||||
const { By, until } = require('selenium-webdriver');
|
||||
const { register, Page, platforms } = require('../../../../../scripts/e2e');
|
||||
|
||||
class E2ETestPage extends Page {
|
||||
constructor(driver, platform) {
|
||||
super(driver, `http://localhost:3333/src/components/grid/test/sizes?ionic:mode=${platform}`);
|
||||
}
|
||||
}
|
||||
|
||||
platforms.forEach(platform => {
|
||||
describe('grid/sizes', () => {
|
||||
register('should init', driver => {
|
||||
const page = new E2ETestPage(driver, platform);
|
||||
return page.navigate('#content');
|
||||
});
|
||||
});
|
||||
});
|
||||
197
core/src/components/grid/test/sizes/index.html
Normal file
197
core/src/components/grid/test/sizes/index.html
Normal file
@ -0,0 +1,197 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Grid - Sizes</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<script src="/dist/ionic.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Grid - Sizes</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content id="content" class="grid-demo">
|
||||
<h2>10 Column Layout</h2>
|
||||
<ion-grid id="grid10"></ion-grid>
|
||||
|
||||
<h2>Responsive sm</h2>
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
<ion-col size="12" size-sm>
|
||||
<div>
|
||||
ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col size="12" size-sm>
|
||||
<div>
|
||||
ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col size="12" size-sm>
|
||||
<div>
|
||||
ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col size="12" size-sm>
|
||||
<div>
|
||||
ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
|
||||
<h2>Breakpoint Sizes</h2>
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
<ion-col size="12" size-sm="6" size-md="4" size-lg="3" size-xl="1">
|
||||
<div>
|
||||
ion-col size="12" size-sm="6" size-md="4" size-lg="3" size-xl="1"
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col size="12" size-sm="6" size-md="4" size-lg="3" size-xl="1">
|
||||
<div>
|
||||
ion-col size="12" size-sm="6" size-md="4" size-lg="3" size-xl="1"
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col size="12" size-sm="6" size-md="4" size-lg="3" size-xl="1">
|
||||
<div>
|
||||
ion-col size="12" size-sm="6" size-md="4" size-lg="3" size-xl="1"
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col size="12" size-sm="6" size-md="4" size-lg="3" size-xl="1">
|
||||
<div>
|
||||
ion-col size="12" size-sm="6" size-md="4" size-lg="3" size-xl="1"
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col size="12" size-sm="6" size-md="4" size-lg="3" size-xl="1">
|
||||
<div>
|
||||
ion-col size="12" size-sm="6" size-md="4" size-lg="3" size-xl="1"
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col size="12" size-sm="6" size-md="4" size-lg="3" size-xl="1">
|
||||
<div>
|
||||
ion-col size="12" size-sm="6" size-md="4" size-lg="3" size-xl="1"
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col size="12" size-sm="6" size-md="4" size-lg="3" size-xl="1">
|
||||
<div>
|
||||
ion-col size="12" size-sm="6" size-md="4" size-lg="3" size-xl="1"
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col size="12" size-sm="6" size-md="4" size-lg="3" size-xl="1">
|
||||
<div>
|
||||
ion-col size="12" size-sm="6" size-md="4" size-lg="3" size-xl="1"
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col size="12" size-sm="6" size-md="4" size-lg="3" size-xl="1">
|
||||
<div>
|
||||
ion-col size="12" size-sm="6" size-md="4" size-lg="3" size-xl="1"
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col size="12" size-sm="6" size-md="4" size-lg="3" size-xl="1">
|
||||
<div>
|
||||
ion-col size="12" size-sm="6" size-md="4" size-lg="3" size-xl="1"
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col size="12" size-sm="6" size-md="4" size-lg="3" size-xl="1">
|
||||
<div>
|
||||
ion-col size="12" size-sm="6" size-md="4" size-lg="3" size-xl="1"
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col size="12" size-sm="6" size-md="4" size-lg="3" size-xl="1">
|
||||
<div>
|
||||
ion-col size="12" size-sm="6" size-md="4" size-lg="3" size-xl="1"
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col size="12" size-sm="6" size-md="4" size-lg="3" size-xl="1">
|
||||
<div>
|
||||
ion-col size="12" size-sm="6" size-md="4" size-lg="3" size-xl="1"
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col size="12" size-sm="6" size-md="4" size-lg="3" size-xl="1">
|
||||
<div>
|
||||
ion-col size="12" size-sm="6" size-md="4" size-lg="3" size-xl="1"
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col size="12" size-sm="6" size-md="4" size-lg="3" size-xl="1">
|
||||
<div>
|
||||
ion-col size="12" size-sm="6" size-md="4" size-lg="3" size-xl="1"
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col size="12" size-sm="6" size-md="4" size-lg="3" size-xl="1">
|
||||
<div>
|
||||
ion-col size="12" size-sm="6" size-md="4" size-lg="3" size-xl="1"
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
|
||||
<ion-grid>
|
||||
<ion-row>
|
||||
<ion-col size="2">
|
||||
<div>
|
||||
ion-col size="2"
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col size="1">
|
||||
<div>
|
||||
ion-col size="1"
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col size="2">
|
||||
<div>
|
||||
ion-col size="2"
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col size="3">
|
||||
<div>
|
||||
ion-col size="3"
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
</ion-grid>
|
||||
</ion-content>
|
||||
|
||||
<script>
|
||||
let cols = [];
|
||||
const sizes = [1, 3, 3, 2, 1];
|
||||
|
||||
for (var i = 0; i < sizes.length; i++) {
|
||||
const col = `
|
||||
<ion-col size="${sizes[i]}">
|
||||
<div>
|
||||
ion-col size ${sizes[i]}
|
||||
</div>
|
||||
</ion-col>
|
||||
`;
|
||||
|
||||
cols.push(col);
|
||||
}
|
||||
const grid = document.getElementById('grid10');
|
||||
|
||||
grid.innerHTML = cols.join('');
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.grid-demo ion-col div {
|
||||
background-color: #f7f7f7;
|
||||
border: 1px solid #ddd;
|
||||
padding: 10px 5px;
|
||||
}
|
||||
|
||||
#grid10 {
|
||||
--ion-grid-columns: 10;
|
||||
}
|
||||
|
||||
</style>
|
||||
</ion-app>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -34,7 +34,7 @@
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col col-6>
|
||||
<ion-col size="6">
|
||||
<div>
|
||||
ion-col[width-50]
|
||||
</div>
|
||||
@ -52,7 +52,7 @@
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col col-3>
|
||||
<ion-col size="3">
|
||||
<div>
|
||||
ion-col[width-25]
|
||||
</div>
|
||||
@ -62,7 +62,7 @@
|
||||
ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col col-3>
|
||||
<ion-col size="3">
|
||||
<div>
|
||||
ion-col[width-25]
|
||||
</div>
|
||||
@ -70,12 +70,12 @@
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col col-3>
|
||||
<ion-col size="3">
|
||||
<div>
|
||||
ion-col[width-25]
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col col-3 offset-3>
|
||||
<ion-col size="3" offset="3">
|
||||
<div>
|
||||
ion-col[width-25][offset-25]
|
||||
</div>
|
||||
@ -90,17 +90,23 @@
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<div>
|
||||
ion-col<br>#
|
||||
ion-col
|
||||
<br>#
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<div>
|
||||
ion-col<br>#<br>#
|
||||
ion-col
|
||||
<br>#
|
||||
<br>#
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<div>
|
||||
ion-col<br>#<br>#<br>#
|
||||
ion-col
|
||||
<br>#
|
||||
<br>#
|
||||
<br>#
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
@ -123,7 +129,9 @@
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<div>
|
||||
ion-col<br>#<br>#
|
||||
ion-col
|
||||
<br>#
|
||||
<br>#
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
@ -146,7 +154,9 @@
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<div>
|
||||
ion-col<br>#<br>#
|
||||
ion-col
|
||||
<br>#
|
||||
<br>#
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
@ -169,7 +179,9 @@
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<div>
|
||||
ion-col<br>#<br>#
|
||||
ion-col
|
||||
<br>#
|
||||
<br>#
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
@ -192,28 +204,30 @@
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<div>
|
||||
ion-col<br>#<br>#
|
||||
ion-col
|
||||
<br>#
|
||||
<br>#
|
||||
</div>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col col-12 col-sm>
|
||||
<ion-col size="12" col-sm>
|
||||
<div>
|
||||
[responsive-sm] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col col-12 col-sm>
|
||||
<ion-col size="12" col-sm>
|
||||
<div>
|
||||
[responsive-sm] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col col-12 col-sm>
|
||||
<ion-col size="12" col-sm>
|
||||
<div>
|
||||
[responsive-sm] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col col-12 col-sm>
|
||||
<ion-col size="12" col-sm>
|
||||
<div>
|
||||
[responsive-sm] ion-col
|
||||
</div>
|
||||
@ -221,22 +235,22 @@
|
||||
</ion-row>
|
||||
|
||||
<ion-row>
|
||||
<ion-col col-12 col-md>
|
||||
<ion-col size="12" col-md>
|
||||
<div>
|
||||
[responsive-md] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col col-12 col-md>
|
||||
<ion-col size="12" col-md>
|
||||
<div>
|
||||
[responsive-md] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col col-12 col-md>
|
||||
<ion-col size="12" col-md>
|
||||
<div>
|
||||
[responsive-md] ion-col
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col col-12 col-md>
|
||||
<ion-col size="12" col-md>
|
||||
<div>
|
||||
[responsive-md] ion-col
|
||||
</div>
|
||||
@ -244,12 +258,12 @@
|
||||
</ion-row>
|
||||
|
||||
<ion-row responsive-lg>
|
||||
<ion-col col-6 offset-3>
|
||||
<ion-col size="6" offset="3">
|
||||
<div>
|
||||
[responsive-lg] ion-col[width-50][offset-25]
|
||||
</div>
|
||||
</ion-col>
|
||||
<ion-col col-3>
|
||||
<ion-col size="3">
|
||||
<div>
|
||||
[responsive-lg] ion-col[width-25]
|
||||
</div>
|
||||
@ -263,6 +277,8 @@
|
||||
border: 1px solid #ddd;
|
||||
padding: 10px 5px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user