javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 00:27:41 +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

148
core/src/components/content/test/preview/index.html Normal file
View File

@ -0,0 +1,148 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Content</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 id="header">
<ion-toolbar style="display: none" id="toolbar2">
<ion-title>Hidden Toolbar</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-title>Content</ion-title>
</ion-toolbar>
</ion-header>
<div style="display: flex; flex: 1">
<ion-content padding style="text-align: center; flex: 2" id="content">
<f></f>
<ion-button onclick="toggleFullscreen()">Toggle content.fullscreen</ion-button>
<p>
<ion-button onclick="toggleDisplay('header')" color="secondary">Toggle header</ion-button>
<ion-button onclick="toggleDisplay('footer')" color="secondary">Toggle footer</ion-button>
<ion-button onclick="toggleDisplay('toolbar2')" color="secondary">Toggle 2nd toolbar</ion-button>
</p>
<p>
<ion-button onclick="toggleDisplay('content2')" color="danger">Toggle bottom content</ion-button>
<ion-button onclick="toggleDisplay('content3')" color="danger">Toggle right content</ion-button>
</p>
<p>
<ion-button onclick="myanimation()" color="dark">Animate</ion-button>
</p>
<f></f>
<f></f>
<f></f>
<f></f>
<f></f>
<f></f>
<f></f>
<f></f>
</ion-content>
<ion-content padding style="display: none" id="content3">
<f></f>
<f></f>
<f></f>
<f></f>
<f></f>
<f></f>
</ion-content>
</div>
<ion-content padding style="display: none" id="content2">
<f></f>
<f></f>
<f></f>
<f></f>
<f></f>
<f></f>
</ion-content>
<ion-footer id="footer">
<ion-toolbar>
<ion-title>Footer</ion-title>
</ion-toolbar>
</ion-footer>
<script>
const content = document.getElementById('content');
content.scrollEvents = true;
content.addEventListener('ionScrollStart', () => console.log('scroll start'));
content.addEventListener('ionScroll', (ev) => console.log('scroll', ev.detail));
content.addEventListener('ionScrollEnd', () => console.log('scroll end'));
function toggleFullscreen() {
const content = document.getElementById('content');
content.fullscreen = !content.fullscreen;
console.log('content.fullscren =', content.fullscreen);
}
function toggleDisplay(id) {
const el = document.getElementById(id);
el.style.display = (!el.style.display) ? 'none' : null;
}
function myanimation() {
const content = document.getElementById('content');
const header = document.getElementById('header');
const footer = document.getElementById('footer');
content.classList.add('animation');
header.classList.add('animation');
footer.classList.add('animation');
}
</script>
<style>
ion-header.animation,
ion-footer.animation,
ion-content.animation {
animation: ani1 5s infinite;
}
#content2 ion-scroll {
background: black;
}
@keyframes ani1 {
0% {
transform: translateX(0)
}
25% {
transform: translateX(-100%)
}
50% {
transform: translateX(0)
}
75% {
transform: translateX(100%)
}
100% {
transform: translateX(0%);
}
}
ion-content.animation {
animation-delay: 500ms;
}
ion-footer.animation {
animation-delay: 1000ms;
}
.toolbar-background {
background: #f8f8f8b8;
}
f {
display: block;
margin: 15px auto;
max-width: 150px;
height: 150px;
background: blue;
}
f:last-of-type {
background: yellow;
}
</style>
</ion-app>
</body>
</html>