javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

tests(demos): update vanilla demos

Browse Source
This commit is contained in:
Brandy Carney
2017-06-30 16:58:09 -04:00
parent 89f464b5a5
commit 93951770e3
5 changed files with 487 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/ionic-vanilla/demos/button/basic.html → packages/ionic-vanilla/demos/components/button/basic.html
View File

@@ -2,7 +2,7 @@
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Ionic Slides Basic</title>
<title>Ionic Buttons</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>

2
packages/ionic-vanilla/demos/button/toolbar.html → packages/ionic-vanilla/demos/components/button/toolbar.html
View File

@@ -2,7 +2,7 @@
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Ionic Slides Basic</title>
<title>Ionic Toolbar Buttons</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>

271
packages/ionic-vanilla/demos/components/grid/basic.html Normal file
View 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>

91
packages/ionic-vanilla/demos/components/icon/basic.html Normal file
View File

@@ -0,0 +1,91 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Ionic Icons</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-navbar>
<ion-title>Icon</ion-title>
</ion-navbar>
</ion-header>
<ion-content text-center class="icon-demo">
<ion-row>
<ion-col><ion-icon name="ionic" color="primary"></ion-icon></ion-col>
<ion-col><ion-icon name="logo-angular"></ion-icon></ion-col>
<ion-col><ion-icon name="heart" color="danger"></ion-icon></ion-col>
<ion-col><ion-icon name="ionitron" color="primary"></ion-icon></ion-col>
<ion-col><ion-icon name="happy" color="vibrant"></ion-icon></ion-col>
<ion-col><ion-icon name="people"></ion-icon></ion-col>
<ion-col><ion-icon name="person"></ion-icon></ion-col>
<ion-col><ion-icon name="contact"></ion-icon></ion-col>
<ion-col><ion-icon name="apps"></ion-icon></ion-col>
<ion-col><ion-icon name="lock"></ion-icon></ion-col>
<ion-col><ion-icon name="key" color="bright"></ion-icon></ion-col>
<ion-col><ion-icon name="unlock"></ion-icon></ion-col>
<ion-col><ion-icon name="map" color="secondary"></ion-icon></ion-col>
<ion-col><ion-icon name="navigate"></ion-icon></ion-col>
<ion-col><ion-icon name="pin"></ion-icon></ion-col>
<ion-col><ion-icon name="locate"></ion-icon></ion-col>
<ion-col><ion-icon name="mic"></ion-icon></ion-col>
<ion-col><ion-icon name="musical-notes" color="vibrant"></ion-icon></ion-col>
<ion-col><ion-icon name="volume-up"></ion-icon></ion-col>
<ion-col><ion-icon name="microphone"></ion-icon></ion-col>
<ion-col><ion-icon name="cafe" color="bright"></ion-icon></ion-col>
<ion-col><ion-icon name="calculator"></ion-icon></ion-col>
<ion-col><ion-icon name="bus"></ion-icon></ion-col>
<ion-col><ion-icon name="wine" color="danger"></ion-icon></ion-col>
<ion-col><ion-icon name="camera"></ion-icon></ion-col>
<ion-col><ion-icon name="image" color="secondary"></ion-icon></ion-col>
<ion-col><ion-icon name="star" color="bright"></ion-icon></ion-col>
<ion-col><ion-icon name="pin"></ion-icon></ion-col>
<ion-col><ion-icon name="arrow-dropup-circle" color="vibrant"></ion-icon></ion-col>
<ion-col><ion-icon name="arrow-back"></ion-icon></ion-col>
<ion-col><ion-icon name="arrow-dropdown"></ion-icon></ion-col>
<ion-col><ion-icon name="arrow-forward"></ion-icon></ion-col>
<ion-col><ion-icon name="cloud"></ion-icon></ion-col>
<ion-col><ion-icon name="sunny" color="bright"></ion-icon></ion-col>
<ion-col><ion-icon name="umbrella"></ion-icon></ion-col>
<ion-col><ion-icon name="rainy" color="primary"></ion-icon></ion-col>
</ion-row>
</ion-content>
<style>
.icon-demo ion-icon {
font-size: 50px;
}
.icon-demo ion-row {
height: 100%;
flex-wrap: wrap;
}
.icon-demo ion-col {
flex: 0 0 25%;
max-width: 25%;
text-align: center;
padding: 10px 5px;
}
</style>
</ion-app>
</body>
</html>

123
packages/ionic-vanilla/demos/components/segment/basic.html Normal file
View File

@@ -0,0 +1,123 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Ionic Segment</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>
<ion-toolbar no-border-top>
<ion-segment value="Free">
<ion-segment-button value="Paid">
Paid
</ion-segment-button>
<ion-segment-button value="Free">
Free
</ion-segment-button>
<ion-segment-button value="Top">
Top
</ion-segment-button>
</ion-segment>
</ion-toolbar>
<ion-toolbar no-border-top no-border-bottom>
<ion-segment color="danger">
<ion-segment-button value="sunny">
Sunny
</ion-segment-button>
<ion-segment-button value="rainy" checked>
Rainy
</ion-segment-button>
</ion-segment>
</ion-toolbar>
<div padding>
<ion-segment color="dark" value="Reading List">
<ion-segment-button value="Bookmarks">
<ion-icon name="book"></ion-icon>
</ion-segment-button>
<ion-segment-button value="Reading List">
<ion-icon ios="ios-glasses-outline" md="md-glasses"></ion-icon>
</ion-segment-button>
<ion-segment-button value="Shared Links">
<ion-icon ios="ios-at-outline" md="md-at"></ion-icon>
</ion-segment-button>
</ion-segment>
<ion-segment id="dynamicPropDisable" disabled color="danger">
<ion-segment-button value="Bookmarks">
Bookmarks
</ion-segment-button>
<ion-segment-button value="Reading List">
Reading List
</ion-segment-button>
<ion-segment-button value="Shared Links">
Shared Links
</ion-segment-button>
</ion-segment>
<ion-segment id="dynamicAttrElem" color="secondary" value="active">
<ion-segment-button value="active">
Active
</ion-segment-button>
<ion-segment-button id="dynamicAttrDisable" value="disabled" disabled="true">
Disabled
</ion-segment-button>
<ion-segment-button value="inactive" disabled="false">
Inactive
</ion-segment-button>
</ion-segment>
</div>
<div padding-horizontal>
<ion-button block onClick="toggleDisabled()">Toggle Disabled</ion-button>
</div>
<div padding>
<ion-button block color="secondary" onClick="toggleValue()">Toggle Value</ion-button>
</div>
<script>
var dynamicAttrDisable = document.getElementById('dynamicAttrDisable');
var dynamicPropDisable = document.getElementById('dynamicPropDisable');
function toggleDisabled() {
const attrIsDisabled = dynamicAttrDisable.getAttribute('disabled') === 'true' ? false : true;
const propIsDisabled = dynamicPropDisable.disabled === true ? false : true;
dynamicAttrDisable.setAttribute('disabled', attrIsDisabled);
dynamicPropDisable.disabled = propIsDisabled;
}
function toggleValue() {
var dynamicAttrElem = document.getElementById('dynamicAttrElem');
var dynamicAttrValue = dynamicAttrElem.getAttribute('value');
if (dynamicAttrValue === 'active') {
dynamicAttrElem.setAttribute('value', 'inactive');
} else if (dynamicAttrValue === 'inactive') {
dynamicAttrElem.setAttribute('value', 'disabled');
} else {
dynamicAttrElem.setAttribute('value', 'active');
}
}
</script>
<style>
[padding] {
padding: 16px;
}
[padding-horizontal] {
padding: 0 16px;
}
[padding] ion-segment {
margin-bottom: 16px;
}
</style>
</ion-content>
</ion-app>
</body>
</html>