mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-09 16:16:41 +08:00
chore(): remove ionic-vanilla and move it into core.
This commit is contained in:
271
packages/core/src/components/grid/test/basic.html
Normal file
271
packages/core/src/components/grid/test/basic.html
Normal file
@ -0,0 +1,271 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Ionic 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-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 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 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>
|
||||
<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 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-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 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 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>
|
||||
|
||||
<style>
|
||||
.grid-demo ion-col div {
|
||||
background-color: #f7f7f7;
|
||||
border: 1px solid #ddd;
|
||||
padding: 10px 5px;
|
||||
}
|
||||
</style>
|
||||
</ion-app>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user