javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-23 14:01:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

test(preview): add preview tests for documentation previews

Browse Source
This commit is contained in:
Brandy Carney
2018-03-21 12:18:04 -04:00
parent d26074a17f
commit fc30ba18f3
57 changed files with 7134 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

151
core/src/components/toolbar/test/preview/index.html Normal file
View File

@ -0,0 +1,151 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Toolbar</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 onload="initialize()">
<ion-app>
<ion-header>
<ion-toolbar color="primary">
<ion-title>Toolbar</ion-title>
</ion-toolbar>
<ion-toolbar color="primary">
<ion-buttons slot="start" class="dynamic-slot">
<ion-button>
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
<ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-buttons slot="end">
<ion-button color="secondary">
<ion-icon slot="icon-only" name="more"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Subheader</ion-title>
</ion-toolbar>
</ion-header>
<ion-content id="content" fullscreen="true">
<ion-card color="secondary">
<ion-card-header>
Card Header
</ion-card-header>
<ion-card-content>
<ion-card-title>
Title
</ion-card-title>
Some normal text in content.
<h3>h3 in content</h3>
<p>
Paragraph in content.
</p>
<p>
Another paragraph in content.
</p>
</ion-card-content>
</ion-card>
<ion-card color="primary" class="rainbow-content">
<ion-card-header>
Card Header
</ion-card-header>
<ion-card-content>
<ion-card-title>
Title
</ion-card-title>
Some normal text in content.
<h3>h3 in content</h3>
<p>
Paragraph in content.
</p>
<p>
Another paragraph in content.
</p>
</ion-card-content>
</ion-card>
<ion-card color="primary">
<ion-card-header>
Card Header
</ion-card-header>
<ion-card-content>
<ion-card-title>
Title
</ion-card-title>
Some normal text in content.
<h3>h3 in content</h3>
<p>
Paragraph in content.
</p>
<p>
Another paragraph in content.
</p>
</ion-card-content>
</ion-card>
<ion-list id="dynamicList">
</ion-list>
</ion-content>
<ion-footer>
<ion-toolbar>
<ion-buttons slot="end">
<ion-button>
<ion-icon slot="icon-only" name="search"></ion-icon>
</ion-button>
</ion-buttons>
<ion-searchbar>
</ion-searchbar>
</ion-toolbar>
<ion-toolbar>
<ion-title>
Footer
</ion-title>
</ion-toolbar>
</ion-footer>
</ion-app>
<style>
.rainbow-content {
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
</style>
<script>
function initialize() {
var mode = Ionic.mode;
if (mode === 'md') {
var buttons = document.querySelectorAll('.dynamic-slot');
for (var i = 0; i < buttons.length; i++) {
buttons[i].setAttribute('slot', 'end');
}
}
}
let items = [];
for (var i = 0; i < 30; i++) {
items.push( i+1 );
}
const list = document.getElementById('dynamicList');
let html = '';
for(let item of items) {
html += `<ion-item>${item}</ion-item>`;
}
list.innerHTML = html;
</script>
</body>
</html>