mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 19:21:34 +08:00
test(core): add a standalone test for every component with a test
This commit is contained in:
Brandy Carney
@ -0,0 +1,58 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html dir="ltr">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Action Sheet - Standalone</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-action-sheet-controller></ion-action-sheet-controller>
|
||||||
|
|
||||||
|
<ion-button expand="block" id="basic" onclick="presentBasic()">Basic</ion-button>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
async function presentBasic() {
|
||||||
|
const mode = Ionic.mode;
|
||||||
|
|
||||||
|
const actionSheetController = document.querySelector('ion-action-sheet-controller');
|
||||||
|
await actionSheetController.componentOnReady();
|
||||||
|
const actionSheetElement = await actionSheetController.create({
|
||||||
|
title: "Albums",
|
||||||
|
buttons: [{
|
||||||
|
text: 'Delete',
|
||||||
|
role: 'destructive',
|
||||||
|
handler: () => {
|
||||||
|
console.log('Delete clicked');
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
text: 'Share',
|
||||||
|
handler: () => {
|
||||||
|
console.log('Share clicked');
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
text: 'Play (open modal)',
|
||||||
|
handler: () => {
|
||||||
|
console.log('Play clicked');
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
text: 'Favorite',
|
||||||
|
handler: () => {
|
||||||
|
console.log('Favorite clicked');
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
text: 'Cancel',
|
||||||
|
role: 'cancel',
|
||||||
|
handler: () => {
|
||||||
|
console.log('Cancel clicked');
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
})
|
||||||
|
await actionSheetElement.present();
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,31 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html dir="ltr">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Alert - Standalone</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-alert-controller></ion-alert-controller>
|
||||||
|
|
||||||
|
<ion-button expand="block" onclick="presentAlert()">Alert</ion-button>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
async function presentAlert() {
|
||||||
|
var alertController = document.querySelector('ion-alert-controller');
|
||||||
|
await alertController.componentOnReady();
|
||||||
|
const alert = await alertController.create({
|
||||||
|
title: 'Alert',
|
||||||
|
subTitle: 'Subtitle',
|
||||||
|
message: 'This is an alert message.',
|
||||||
|
buttons: ['OK']
|
||||||
|
});
|
||||||
|
return await alert.present();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html dir="ltr">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Avatar - Standalone</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-avatar>
|
||||||
|
<img src="https://images.unsplash.com/photo-1485832329521-e944d75fa65e?auto=format&fit=crop&w=1950&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D"/>
|
||||||
|
</ion-avatar>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html dir="ltr">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Badge - Standalone</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-badge color="primary">11</ion-badge>
|
||||||
|
<ion-badge color="secondary">22</ion-badge>
|
||||||
|
<ion-badge color="danger">33</ion-badge>
|
||||||
|
<ion-badge color="light">44</ion-badge>
|
||||||
|
<ion-badge color="dark">55</ion-badge>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html dir="ltr">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Button - Standalone</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-button color="primary">Primary</ion-button>
|
||||||
|
<ion-button color="secondary">Secondary</ion-button>
|
||||||
|
<ion-button color="danger">Danger</ion-button>
|
||||||
|
<ion-button color="light">Light</ion-button>
|
||||||
|
<ion-button color="dark">Dark</ion-button>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
33
packages/core/src/components/card/test/standalone/index.html
Normal file
33
packages/core/src/components/card/test/standalone/index.html
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html dir="ltr">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Card - Standalone</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-card>
|
||||||
|
<ion-card-content>
|
||||||
|
This is just your basic card with some text to boot. Like it? Keep scrolling...
|
||||||
|
</ion-card-content>
|
||||||
|
</ion-card>
|
||||||
|
|
||||||
|
<ion-card>
|
||||||
|
<ion-card-header>
|
||||||
|
<ion-card-subtitle>
|
||||||
|
Subtitle
|
||||||
|
</ion-card-subtitle>
|
||||||
|
<ion-card-title>
|
||||||
|
Title
|
||||||
|
</ion-card-title>
|
||||||
|
</ion-card-header>
|
||||||
|
|
||||||
|
<ion-card-content>
|
||||||
|
The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.
|
||||||
|
</ion-card-content>
|
||||||
|
</ion-card>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html dir="ltr">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Checkbox - Standalone</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-checkbox checked></ion-checkbox>
|
||||||
|
<ion-checkbox color="primary" checked></ion-checkbox>
|
||||||
|
<ion-checkbox color="secondary" checked></ion-checkbox>
|
||||||
|
<ion-checkbox color="danger" checked></ion-checkbox>
|
||||||
|
<ion-checkbox color="dark" checked></ion-checkbox>
|
||||||
|
<ion-checkbox color="light" checked></ion-checkbox>
|
||||||
|
<ion-checkbox disabled></ion-checkbox>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
47
packages/core/src/components/chip/test/standalone/index.html
Normal file
47
packages/core/src/components/chip/test/standalone/index.html
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html dir="ltr">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Chip - Standalone</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-chip>
|
||||||
|
<ion-label>Default</ion-label>
|
||||||
|
</ion-chip>
|
||||||
|
|
||||||
|
<ion-chip>
|
||||||
|
<ion-label color="secondary">Secondary Label</ion-label>
|
||||||
|
</ion-chip>
|
||||||
|
|
||||||
|
<ion-chip>
|
||||||
|
<ion-label>Another With Longer Text</ion-label>
|
||||||
|
</ion-chip>
|
||||||
|
|
||||||
|
<ion-chip color="primary">
|
||||||
|
<ion-icon name="heart" color="dark"></ion-icon>
|
||||||
|
<ion-label>Primary</ion-label>
|
||||||
|
</ion-chip>
|
||||||
|
|
||||||
|
<ion-chip color="secondary">
|
||||||
|
<ion-label color="dark">Secondary w/ Dark label</ion-label>
|
||||||
|
</ion-chip>
|
||||||
|
|
||||||
|
<ion-chip color="danger">
|
||||||
|
<ion-label>Danger</ion-label>
|
||||||
|
</ion-chip>
|
||||||
|
|
||||||
|
<ion-chip>
|
||||||
|
<ion-icon name="pin"></ion-icon>
|
||||||
|
<ion-label>Default</ion-label>
|
||||||
|
</ion-chip>
|
||||||
|
|
||||||
|
<ion-chip>
|
||||||
|
<ion-label>Secondary</ion-label>
|
||||||
|
<ion-icon name="pin" color="secondary"></ion-icon>
|
||||||
|
</ion-chip>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html dir="ltr">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Datetime - Standalone</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-datetime display-format="MMMM" value="2012-12-15T13:47:20.789"></ion-datetime>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
32
packages/core/src/components/fab/test/standalone/index.html
Normal file
32
packages/core/src/components/fab/test/standalone/index.html
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html dir="ltr">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>FAB - Standalone</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-fab top right id="fab1">
|
||||||
|
<ion-fab-button onclick="openLists('fab1')" mini class="e2eFabTopRight"><ion-icon name="add"></ion-icon></ion-fab-button>
|
||||||
|
<ion-fab-list>
|
||||||
|
<ion-fab-button onclick="openLists('fab1')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
|
||||||
|
<ion-fab-button onclick="openLists('fab1')"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
|
||||||
|
<ion-fab-button onclick="openLists('fab1')"><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
|
||||||
|
<ion-fab-button onclick="openLists('fab1')"><ion-icon name="logo-googleplus"></ion-icon></ion-fab-button>
|
||||||
|
</ion-fab-list>
|
||||||
|
</ion-fab>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function openLists(container) {
|
||||||
|
var fabLists = document.getElementById(container).querySelectorAll('ion-fab-list');
|
||||||
|
|
||||||
|
for (var i = 0; i < fabLists.length; i++) {
|
||||||
|
fabLists[i].activated = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
268
packages/core/src/components/grid/test/standalone/index.html
Normal file
268
packages/core/src/components/grid/test/standalone/index.html
Normal file
@ -0,0 +1,268 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html dir="ltr">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Grid - Standalone</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-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>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
ion-col div {
|
||||||
|
background-color: #f7f7f7;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
padding: 10px 5px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
22
packages/core/src/components/icon/test/standalone/index.html
Normal file
22
packages/core/src/components/icon/test/standalone/index.html
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html dir="ltr">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Icon - Standalone</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-icon name="logo-ionic" color="primary"></ion-icon>
|
||||||
|
<ion-icon name="logo-ionitron" color="primary"></ion-icon>
|
||||||
|
<ion-icon name="heart" color="secondary"></ion-icon>
|
||||||
|
<ion-icon name="logo-angular" color="danger"></ion-icon>
|
||||||
|
|
||||||
|
<ion-icon name="happy"></ion-icon>
|
||||||
|
<ion-icon name="people"></ion-icon>
|
||||||
|
<ion-icon name="lock"></ion-icon>
|
||||||
|
<ion-icon name="key"></ion-icon>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -39,7 +39,6 @@
|
|||||||
</ion-page>
|
</ion-page>
|
||||||
|
|
||||||
</ion-app>
|
</ion-app>
|
||||||
<ion-menu-controller></ion-menu-controller>
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
let items = [];
|
let items = [];
|
||||||
|
|||||||
@ -0,0 +1,69 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html dir="ltr">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Infinite Scroll - Standalone</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-list id="list">
|
||||||
|
|
||||||
|
</ion-list>
|
||||||
|
|
||||||
|
<ion-infinite-scroll threshold="100px" id="infinite-scroll">
|
||||||
|
<ion-infinite-scroll-content
|
||||||
|
loadingSpinner="bubbles"
|
||||||
|
loadingText="Loading more data...">
|
||||||
|
</ion-infinite-scroll-content>
|
||||||
|
</ion-infinite-scroll>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
let items = [];
|
||||||
|
for (var i = 0; i < 30; i++) {
|
||||||
|
items.push( i+1 );
|
||||||
|
}
|
||||||
|
const list = document.getElementById('list');
|
||||||
|
const infiniteScroll = document.getElementById('infinite-scroll');
|
||||||
|
|
||||||
|
function toggleInfiniteScroll() {
|
||||||
|
infiniteScroll.enabled = !infiniteScroll.enabled;
|
||||||
|
}
|
||||||
|
|
||||||
|
infiniteScroll.addEventListener('ionInfinite', async function() {
|
||||||
|
console.log('Loading data...');
|
||||||
|
const data = await getAsyncData();
|
||||||
|
items = items.concat(data);
|
||||||
|
infiniteScroll.complete();
|
||||||
|
render();
|
||||||
|
console.log('Done');
|
||||||
|
});
|
||||||
|
|
||||||
|
function render() {
|
||||||
|
let html = '';
|
||||||
|
for(let item of items) {
|
||||||
|
html += `<ion-item>${item}</ion-item>`;
|
||||||
|
}
|
||||||
|
list.innerHTML = html;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getAsyncData() {
|
||||||
|
// async return mock data
|
||||||
|
return new Promise(resolve => {
|
||||||
|
setTimeout(() => {
|
||||||
|
let data = [];
|
||||||
|
for (var i = 0; i < 30; i++) {
|
||||||
|
data.push(i);
|
||||||
|
}
|
||||||
|
|
||||||
|
resolve(data);
|
||||||
|
}, 500);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
render();
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html dir="ltr">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Input - Standalone</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-input placeholder="Input"></ion-input>
|
||||||
|
<ion-input value="value"></ion-input>
|
||||||
|
<ion-input type="number" placeholder="Enter a Number"></ion-input>
|
||||||
|
<ion-input type="number" value="44"></ion-input>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,46 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html dir="ltr">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Item Sliding - Standalone</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-item-sliding>
|
||||||
|
<ion-item>
|
||||||
|
<ion-label>
|
||||||
|
One Line, icon only
|
||||||
|
</ion-label>
|
||||||
|
</ion-item>
|
||||||
|
<ion-item-options>
|
||||||
|
<ion-item-option color="secondary">
|
||||||
|
<ion-icon slot="icon-only" name="heart"></ion-icon>
|
||||||
|
</ion-item-option>
|
||||||
|
<ion-item-option color="danger">
|
||||||
|
<ion-icon slot="icon-only" name="close"></ion-icon>
|
||||||
|
</ion-item-option>
|
||||||
|
</ion-item-options>
|
||||||
|
</ion-item-sliding>
|
||||||
|
|
||||||
|
<ion-item-sliding>
|
||||||
|
<ion-item>
|
||||||
|
<ion-label>
|
||||||
|
One Line, icon and text
|
||||||
|
</ion-label>
|
||||||
|
</ion-item>
|
||||||
|
<ion-item-options>
|
||||||
|
<ion-item-option color="primary">
|
||||||
|
<ion-icon name="more"></ion-icon>
|
||||||
|
<span class="more-text">More</span>
|
||||||
|
</ion-item-option>
|
||||||
|
<ion-item-option color="secondary">
|
||||||
|
<ion-icon name="archive"></ion-icon>
|
||||||
|
<span class="archive-text">Archive</span>
|
||||||
|
</ion-item-option>
|
||||||
|
</ion-item-options>
|
||||||
|
</ion-item-sliding>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
48
packages/core/src/components/item/test/standalone/index.html
Normal file
48
packages/core/src/components/item/test/standalone/index.html
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html dir="ltr">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Item - Standalone</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-item>
|
||||||
|
<ion-label>Item Text</ion-label>
|
||||||
|
</ion-item>
|
||||||
|
|
||||||
|
<ion-item>
|
||||||
|
<ion-label>
|
||||||
|
<h1>Item Multiline Text</h1>
|
||||||
|
<h2>Heading</h2>
|
||||||
|
<h3>Heading</h3>
|
||||||
|
</ion-label>
|
||||||
|
</ion-item>
|
||||||
|
|
||||||
|
<ion-item>
|
||||||
|
<ion-label>Item Icons</ion-label>
|
||||||
|
<ion-icon name="heart" slot="end"></ion-icon>
|
||||||
|
<ion-icon name="star" slot="start"></ion-icon>
|
||||||
|
</ion-item>
|
||||||
|
|
||||||
|
<ion-item>
|
||||||
|
<ion-label>Item Button</ion-label>
|
||||||
|
<ion-button slot="start"><ion-icon name="heart" slot="end"></ion-icon>Start Button</ion-button>
|
||||||
|
<ion-button slot="end">End Button<ion-icon name="star" slot="start"></ion-icon></ion-button>
|
||||||
|
</ion-item>
|
||||||
|
|
||||||
|
<ion-item>
|
||||||
|
<ion-label>Item Avatar</ion-label>
|
||||||
|
<ion-avatar slot="start"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs="></ion-avatar>
|
||||||
|
<ion-avatar slot="end"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs="></ion-avatar>
|
||||||
|
</ion-item>
|
||||||
|
|
||||||
|
<ion-item>
|
||||||
|
<ion-label>Item Thumbnail</ion-label>
|
||||||
|
<ion-thumbnail slot="start"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs="></ion-thumbnail>
|
||||||
|
<ion-thumbnail slot="end"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs="></ion-thumbnail>
|
||||||
|
</ion-item>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html dir="ltr">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Label - Standalone</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-label>Default</ion-label>
|
||||||
|
<ion-label>Wrap label this label just goes on and on and on</ion-label>
|
||||||
|
<ion-label fixed>Fixed</ion-label>
|
||||||
|
<ion-label floating>Floating</ion-label>
|
||||||
|
<ion-label stacked>Stacked</ion-label>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
33
packages/core/src/components/list/test/standalone/index.html
Normal file
33
packages/core/src/components/list/test/standalone/index.html
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html dir="ltr">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>List - Standalone</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-list>
|
||||||
|
<ion-item>Pokémon Yellow</ion-item>
|
||||||
|
<ion-item>Super Metroid</ion-item>
|
||||||
|
<ion-item>Mega Man X</ion-item>
|
||||||
|
<ion-item>The Legend of Zelda</ion-item>
|
||||||
|
<ion-item>Pac-Man</ion-item>
|
||||||
|
<ion-item>Super Mario World</ion-item>
|
||||||
|
<ion-item>Street Fighter II</ion-item>
|
||||||
|
<ion-item>Half Life</ion-item>
|
||||||
|
<ion-item>Portal</ion-item>
|
||||||
|
<ion-item>Final Fantasy VII</ion-item>
|
||||||
|
<ion-item>Star Fox</ion-item>
|
||||||
|
<ion-item>Tetris</ion-item>
|
||||||
|
<ion-item>Donkey Kong III</ion-item>
|
||||||
|
<ion-item>Goldeneye 007</ion-item>
|
||||||
|
<ion-item>Doom</ion-item>
|
||||||
|
<ion-item>Fallout</ion-item>
|
||||||
|
<ion-item>GTA</ion-item>
|
||||||
|
<ion-item>Halo</ion-item>
|
||||||
|
</ion-list>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,28 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html dir="ltr">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Loading - Standalone</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-button expand="block" onclick="presentLoading()" class="e2eShowLoading">Show Loading</ion-button>
|
||||||
|
|
||||||
|
<ion-loading-controller></ion-loading-controller>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
async function presentLoading() {
|
||||||
|
const loadingController = document.querySelector('ion-loading-controller');
|
||||||
|
await loadingController.componentOnReady();
|
||||||
|
const loadingElement = await loadingController.create({
|
||||||
|
message: 'Hellooo',
|
||||||
|
duration: 2000
|
||||||
|
});
|
||||||
|
return await loadingElement.present();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
68
packages/core/src/components/menu/test/standalone/index.html
Normal file
68
packages/core/src/components/menu/test/standalone/index.html
Normal file
@ -0,0 +1,68 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html dir="ltr">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Menu - Standalone</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-menu side="left">
|
||||||
|
<ion-header>
|
||||||
|
<ion-toolbar color="secondary">
|
||||||
|
<ion-title>Left Menu</ion-title>
|
||||||
|
</ion-toolbar>
|
||||||
|
</ion-header>
|
||||||
|
|
||||||
|
<ion-content>
|
||||||
|
<ion-list>
|
||||||
|
<ion-item>Open Right Menu</ion-item>
|
||||||
|
<ion-item detail-none>Close Menu</ion-item>
|
||||||
|
<ion-item detail-none>Close Menu</ion-item>
|
||||||
|
<ion-item detail-none>Close Menu</ion-item>
|
||||||
|
<ion-item detail-none>Close Menu</ion-item>
|
||||||
|
<ion-item detail-none>Close Menu</ion-item>
|
||||||
|
<ion-item detail-none>Close Menu</ion-item>
|
||||||
|
<ion-item detail-none>Close Menu</ion-item>
|
||||||
|
<ion-item detail-none>Close Menu</ion-item>
|
||||||
|
<ion-item detail-none>Close Menu</ion-item>
|
||||||
|
<ion-item detail-none>Close Menu</ion-item>
|
||||||
|
<ion-item detail-none>Close Menu</ion-item>
|
||||||
|
</ion-list>
|
||||||
|
</ion-content>
|
||||||
|
|
||||||
|
<ion-footer>
|
||||||
|
<ion-toolbar color="secondary">
|
||||||
|
<ion-title>Footer</ion-title>
|
||||||
|
</ion-toolbar>
|
||||||
|
</ion-footer>
|
||||||
|
|
||||||
|
</ion-menu>
|
||||||
|
|
||||||
|
<ion-page main>
|
||||||
|
|
||||||
|
<ion-header>
|
||||||
|
<ion-toolbar>
|
||||||
|
<ion-title>Menu - Basic</ion-title>
|
||||||
|
</ion-toolbar>
|
||||||
|
</ion-header>
|
||||||
|
|
||||||
|
<ion-content padding>
|
||||||
|
<p>
|
||||||
|
<ion-button class="e2eOpenLeftMenu" onclick="openLeft()">Open left menu</ion-button>
|
||||||
|
<ion-button onclick="openRight()">Open right menu</ion-button>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<ion-button onclick="setPush()">Set Push</ion-button>
|
||||||
|
<ion-button onclick="setOverlay()">Set Overlay</ion-button>
|
||||||
|
<ion-button onclick="setReveal()">Set Reveal</ion-button>
|
||||||
|
|
||||||
|
<ion-button onclick="setEnabled()">Set Swipe Enabled False</ion-button>
|
||||||
|
</p>
|
||||||
|
</ion-content>
|
||||||
|
|
||||||
|
</ion-page>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,27 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html dir="ltr">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Modal - Standalone</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-button expand="block" onclick="presentModal()">Present Modal</ion-button>
|
||||||
|
|
||||||
|
<ion-modal-controller></ion-modal-controller>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
async function presentModal() {
|
||||||
|
const modalController = document.querySelector('ion-modal-controller');
|
||||||
|
await modalController.componentOnReady();
|
||||||
|
const modalElement = await modalController.create({
|
||||||
|
component: 'page-one'
|
||||||
|
});
|
||||||
|
modalElement.present();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,47 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html dir="ltr">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Popover - Standalone</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-button expand="block" onclick="presentPopover({ component: 'profile-page', ev: event })">Show Popover</ion-button>
|
||||||
|
|
||||||
|
<ion-popover-controller></ion-popover-controller>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
async function presentPopover(opts) {
|
||||||
|
const popoverController = document.querySelector('ion-popover-controller');
|
||||||
|
await popoverController.componentOnReady();
|
||||||
|
const popoverElement = await popoverController.create(opts);
|
||||||
|
return await popoverElement.present();
|
||||||
|
}
|
||||||
|
|
||||||
|
class ProfilePage extends HTMLElement {
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
}
|
||||||
|
|
||||||
|
connectedCallback() {
|
||||||
|
this.innerHTML = `
|
||||||
|
<ion-content>
|
||||||
|
<ion-list>
|
||||||
|
<ion-list-header>Ionic</ion-list-header>
|
||||||
|
<ion-item><ion-label>Item 0</ion-label></ion-item>
|
||||||
|
<ion-item><ion-label>Item 1</ion-label></ion-item>
|
||||||
|
<ion-item><ion-label>Item 2</ion-label></ion-item>
|
||||||
|
<ion-item><ion-label>Item 3</ion-label></ion-item>
|
||||||
|
</ion-list>
|
||||||
|
</ion-content>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
customElements.define('profile-page', ProfilePage);
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,22 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html dir="ltr">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Radio Group - Standalone</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-radio-group>
|
||||||
|
<ion-radio></ion-radio>
|
||||||
|
<ion-radio color="primary"></ion-radio>
|
||||||
|
<ion-radio color="secondary"></ion-radio>
|
||||||
|
<ion-radio color="danger" checked></ion-radio>
|
||||||
|
<ion-radio color="dark"></ion-radio>
|
||||||
|
<ion-radio color="light"></ion-radio>
|
||||||
|
<ion-radio disabled></ion-radio>
|
||||||
|
</ion-radio-group>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html dir="ltr">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Radio - Standalone</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-radio checked></ion-radio>
|
||||||
|
<ion-radio color="primary" checked></ion-radio>
|
||||||
|
<ion-radio color="secondary" checked></ion-radio>
|
||||||
|
<ion-radio color="danger" checked></ion-radio>
|
||||||
|
<ion-radio color="dark" checked></ion-radio>
|
||||||
|
<ion-radio color="light" checked></ion-radio>
|
||||||
|
<ion-radio disabled></ion-radio>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,24 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html dir="ltr">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Range - Standalone</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-range value="20"></ion-range>
|
||||||
|
<ion-range value="60" color="light"></ion-range>
|
||||||
|
<ion-range value="80" color="dark"></ion-range>
|
||||||
|
<ion-range pin="true" color="secondary" value="86">
|
||||||
|
<ion-icon small name="ios-sunny-outline" slot="start"></ion-icon>
|
||||||
|
<ion-icon name="ios-sunny" slot="end"></ion-icon>
|
||||||
|
</ion-range>
|
||||||
|
<ion-range pin="true" color="danger" value="54">
|
||||||
|
<ion-icon small name="ios-thermometer-outline" slot="start"></ion-icon>
|
||||||
|
<ion-icon name="ios-thermometer" slot="end"></ion-icon>
|
||||||
|
</ion-range>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,63 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html dir="ltr">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Reorder - Standalone</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-reorder-group id="reorder">
|
||||||
|
|
||||||
|
<div>
|
||||||
|
Item 1 (default ion-reorder)
|
||||||
|
<ion-reorder></ion-reorder>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
Item 2 (default ion-reorder)
|
||||||
|
<ion-reorder></ion-reorder>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
Item 3 (default ion-reorder)
|
||||||
|
<ion-reorder></ion-reorder>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
Item 4 (default ion-reorder)
|
||||||
|
<ion-reorder></ion-reorder>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
Item 5 (custom ion-reorder)
|
||||||
|
<ion-reorder><ion-icon name="pizza"></ion-reorder>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
Item 6 (custom ion-reorder)
|
||||||
|
<ion-reorder><ion-icon name="pizza"></ion-reorder>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
Item 7 (custom ion-reorder)
|
||||||
|
<ion-reorder><ion-icon name="pizza"></ion-reorder>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ion-reorder>
|
||||||
|
<div>Item 8 (the whole item can be dragged)</div>
|
||||||
|
</ion-reorder>
|
||||||
|
|
||||||
|
<ion-reorder>
|
||||||
|
<div>Item 9 (the whole item can be dragged)</div>
|
||||||
|
</ion-reorder>
|
||||||
|
|
||||||
|
<ion-reorder>
|
||||||
|
<div>Item 10 (the whole item can be dragged)</div>
|
||||||
|
</ion-reorder>
|
||||||
|
|
||||||
|
</ion-reorder-group>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,89 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html dir="ltr">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Searchbar - Standalone</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-searchbar
|
||||||
|
value="test"
|
||||||
|
type="tel"
|
||||||
|
show-cancel-button
|
||||||
|
debounce="500">
|
||||||
|
</ion-searchbar>
|
||||||
|
|
||||||
|
<ion-searchbar
|
||||||
|
animated="true"
|
||||||
|
show-cancel-button
|
||||||
|
debounce="500">
|
||||||
|
</ion-searchbar>
|
||||||
|
|
||||||
|
<ion-searchbar
|
||||||
|
id="dynamicProp"
|
||||||
|
value="33"
|
||||||
|
autocorrect="on"
|
||||||
|
show-cancel-button="true"
|
||||||
|
autocomplete="on"
|
||||||
|
spellcheck="false"
|
||||||
|
type="number"
|
||||||
|
placeholder="Filter Schedules">
|
||||||
|
</ion-searchbar>
|
||||||
|
|
||||||
|
<ion-searchbar
|
||||||
|
value="after view"
|
||||||
|
autocorrect="off"
|
||||||
|
autocomplete="off"
|
||||||
|
spellcheck="true"
|
||||||
|
type="text"
|
||||||
|
show-cancel-button="false">
|
||||||
|
</ion-searchbar>
|
||||||
|
|
||||||
|
<ion-searchbar
|
||||||
|
show-cancel-button
|
||||||
|
cancel-button-text="Really Long Cancel"
|
||||||
|
color="danger">
|
||||||
|
</ion-searchbar>
|
||||||
|
|
||||||
|
<ion-searchbar
|
||||||
|
value="mysearch"
|
||||||
|
cancel-button-text="Really Long Cancel"
|
||||||
|
color="dark"
|
||||||
|
show-cancel-button>
|
||||||
|
</ion-searchbar>
|
||||||
|
|
||||||
|
<ion-searchbar
|
||||||
|
mode="ios"
|
||||||
|
animated="true"
|
||||||
|
show-cancel-button
|
||||||
|
placeholder="Search">
|
||||||
|
</ion-searchbar>
|
||||||
|
|
||||||
|
<ion-searchbar
|
||||||
|
mode="md"
|
||||||
|
animated="true"
|
||||||
|
show-cancel-button
|
||||||
|
placeholder="Search">
|
||||||
|
</ion-searchbar>
|
||||||
|
|
||||||
|
<ion-searchbar
|
||||||
|
autocorrect="on"
|
||||||
|
show-cancel-button="true"
|
||||||
|
autocomplete="on"
|
||||||
|
spellcheck="true"
|
||||||
|
type="text"
|
||||||
|
debounce="5000"
|
||||||
|
placeholder="Check the log">
|
||||||
|
</ion-searchbar>
|
||||||
|
|
||||||
|
<ion-searchbar
|
||||||
|
id="dynamicAttr"
|
||||||
|
placeholder="Search"
|
||||||
|
animated="true"
|
||||||
|
show-cancel-button="false">
|
||||||
|
</ion-searchbar>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,48 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html dir="ltr">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Segment - Standalone</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-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 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 color="secondary" value="active">
|
||||||
|
<ion-segment-button value="active">
|
||||||
|
Active
|
||||||
|
</ion-segment-button>
|
||||||
|
<ion-segment-button value="disabled" disabled="true">
|
||||||
|
Disabled
|
||||||
|
</ion-segment-button>
|
||||||
|
<ion-segment-button value="inactive" disabled="false">
|
||||||
|
Inactive
|
||||||
|
</ion-segment-button>
|
||||||
|
</ion-segment>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,62 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html dir="ltr">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Select - Standalone</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-select name="gender" placeholder="Select One">
|
||||||
|
<ion-select-option value="f">Female</ion-select-option>
|
||||||
|
<ion-select-option value="m">Male</ion-select-option>
|
||||||
|
</ion-select>
|
||||||
|
|
||||||
|
<ion-select name="hairColor" ok-text="Okay" cancel-text="Dismiss">
|
||||||
|
<ion-select-option value="brown" selected>Brown</ion-select-option>
|
||||||
|
<ion-select-option value="blonde">Blonde</ion-select-option>
|
||||||
|
<ion-select-option value="black">Black</ion-select-option>
|
||||||
|
<ion-select-option value="red">Red</ion-select-option>
|
||||||
|
</ion-select>
|
||||||
|
|
||||||
|
<ion-select name="gaming" ok-text="Okay" cancel-text="Dismiss">
|
||||||
|
<ion-select-option value="nes">NES</ion-select-option>
|
||||||
|
<ion-select-option value="n64">Nintendo64</ion-select-option>
|
||||||
|
<ion-select-option value="ps">PlayStation</ion-select-option>
|
||||||
|
<ion-select-option value="genesis">Sega Genesis</ion-select-option>
|
||||||
|
<ion-select-option value="saturn">Sega Saturn</ion-select-option>
|
||||||
|
<ion-select-option value="snes">SNES</ion-select-option>
|
||||||
|
</ion-select>
|
||||||
|
|
||||||
|
<ion-select placeholder="Month">
|
||||||
|
<ion-select-option value="01">January</ion-select-option>
|
||||||
|
<ion-select-option value="02">February</ion-select-option>
|
||||||
|
<ion-select-option value="03" selected="true">March</ion-select-option>
|
||||||
|
<ion-select-option value="04">April</ion-select-option>
|
||||||
|
<ion-select-option value="05">May</ion-select-option>
|
||||||
|
<ion-select-option value="06">June</ion-select-option>
|
||||||
|
<ion-select-option value="07">July</ion-select-option>
|
||||||
|
<ion-select-option value="08">August</ion-select-option>
|
||||||
|
<ion-select-option value="09">September</ion-select-option>
|
||||||
|
<ion-select-option value="10">October</ion-select-option>
|
||||||
|
<ion-select-option value="11">November</ion-select-option>
|
||||||
|
<ion-select-option value="12">December</ion-select-option>
|
||||||
|
</ion-select>
|
||||||
|
|
||||||
|
<ion-select placeholder="Year">
|
||||||
|
<ion-select-option>1989</ion-select-option>
|
||||||
|
<ion-select-option>1990</ion-select-option>
|
||||||
|
<ion-select-option>1991</ion-select-option>
|
||||||
|
<ion-select-option>1992</ion-select-option>
|
||||||
|
<ion-select-option>1993</ion-select-option>
|
||||||
|
<ion-select-option selected="true">1994</ion-select-option>
|
||||||
|
<ion-select-option>1995</ion-select-option>
|
||||||
|
<ion-select-option>1996</ion-select-option>
|
||||||
|
<ion-select-option>1997</ion-select-option>
|
||||||
|
<ion-select-option>1998</ion-select-option>
|
||||||
|
<ion-select-option>1999</ion-select-option>
|
||||||
|
</ion-select>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -6,23 +6,24 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
<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>
|
<script src="/dist/ionic.js"></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
<ion-app>
|
||||||
<ion-slides style="background: black" pager="true" effect="flip">
|
<ion-page>
|
||||||
|
<ion-content>
|
||||||
|
<ion-slides style="background: black" pager="true" effect="flip">
|
||||||
<ion-slide style="background: red; color: white;">
|
<ion-slide style="background: red; color: white;">
|
||||||
<h1>Slide 1</h1>
|
<h1>Slide 1</h1>
|
||||||
</ion-slide>
|
</ion-slide>
|
||||||
|
|
||||||
<ion-slide style="background: white; color: blue;">
|
<ion-slide style="background: white; color: blue;">
|
||||||
<h1>Slide 2</h1>
|
<h1>Slide 2</h1>
|
||||||
</ion-slide>
|
</ion-slide>
|
||||||
|
|
||||||
<ion-slide style="background: blue; color: white;">
|
<ion-slide style="background: blue; color: white;">
|
||||||
<h1>Slide 3</h1>
|
<h1>Slide 3</h1>
|
||||||
</ion-slide>
|
</ion-slide>
|
||||||
|
</ion-slides>
|
||||||
</ion-slides>
|
</ion-content>
|
||||||
|
</ion-page>
|
||||||
|
</ion-app>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -0,0 +1,28 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html dir="ltr">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Slides - Standalone</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-slides style="background: black" pager="true" effect="flip">
|
||||||
|
|
||||||
|
<ion-slide style="background: red; color: white;">
|
||||||
|
<h1>Slide 1</h1>
|
||||||
|
</ion-slide>
|
||||||
|
|
||||||
|
<ion-slide style="background: white; color: blue;">
|
||||||
|
<h1>Slide 2</h1>
|
||||||
|
</ion-slide>
|
||||||
|
|
||||||
|
<ion-slide style="background: blue; color: white;">
|
||||||
|
<h1>Slide 3</h1>
|
||||||
|
</ion-slide>
|
||||||
|
|
||||||
|
</ion-slides>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html dir="ltr">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Spinner - Standalone</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-spinner></ion-spinner>
|
||||||
|
<ion-spinner name="lines"></ion-spinner>
|
||||||
|
<ion-spinner name="ios-small"></ion-spinner>
|
||||||
|
<ion-spinner name="dots"></ion-spinner>
|
||||||
|
<ion-spinner name="bubbles"></ion-spinner>
|
||||||
|
<ion-spinner name="circles"></ion-spinner>
|
||||||
|
<ion-spinner name="crescent"></ion-spinner>
|
||||||
|
<ion-spinner paused></ion-spinner>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html dir="ltr">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Textarea - Standalone</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-textarea placeholder="Textarea"></ion-textarea>
|
||||||
|
<ion-textarea value="value"></ion-textarea>
|
||||||
|
<ion-textarea value="44"></ion-textarea>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html dir="ltr">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Thumbnail - Standalone</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-thumbnail>
|
||||||
|
<img src="https://images.unsplash.com/photo-1485832329521-e944d75fa65e?auto=format&fit=crop&w=1950&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D"/>
|
||||||
|
</ion-thumbnail>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,29 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html dir="ltr">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Toast - Standalone</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-button expand="block" onclick="presentToast('bottom')">Show Toast Bottom</ion-button>
|
||||||
|
|
||||||
|
<ion-toast-controller></ion-toast-controller>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
async function presentToast(position) {
|
||||||
|
const toastController = document.querySelector('ion-toast-controller');
|
||||||
|
await toastController.componentOnReady();
|
||||||
|
const toastElement = await toastController.create({
|
||||||
|
message: 'Hellooo',
|
||||||
|
position,
|
||||||
|
duration: 2000
|
||||||
|
});
|
||||||
|
return await toastElement.present();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html dir="ltr">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Toggle - Standalone</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-toggle checked></ion-toggle>
|
||||||
|
<ion-toggle color="secondary" (ionChange)="kiwiChange($event)" checked></ion-toggle>
|
||||||
|
<ion-toggle color="danger" name="cherry" checked></ion-toggle>
|
||||||
|
<ion-toggle color="light" (ionChange)="strawberryChange($event)" checked="true"></ion-toggle>
|
||||||
|
<ion-toggle color="dark" checked></ion-toggle>
|
||||||
|
<ion-toggle checked disabled></ion-toggle>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,36 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html dir="ltr">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Toolbar - Standalone</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-toolbar>
|
||||||
|
<ion-title>Toolbar</ion-title>
|
||||||
|
</ion-toolbar>
|
||||||
|
|
||||||
|
<ion-toolbar color="primary">
|
||||||
|
<ion-title>Primary</ion-title>
|
||||||
|
</ion-toolbar>
|
||||||
|
|
||||||
|
<ion-toolbar color="secondary">
|
||||||
|
<ion-title>Secondary</ion-title>
|
||||||
|
</ion-toolbar>
|
||||||
|
|
||||||
|
<ion-toolbar color="danger">
|
||||||
|
<ion-title>Danger</ion-title>
|
||||||
|
</ion-toolbar>
|
||||||
|
|
||||||
|
<ion-toolbar color="light">
|
||||||
|
<ion-title>Light</ion-title>
|
||||||
|
</ion-toolbar>
|
||||||
|
|
||||||
|
<ion-toolbar color="dark">
|
||||||
|
<ion-title>Dark</ion-title>
|
||||||
|
</ion-toolbar>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user