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

chore(test): remove unused preview tests (#18608)

Browse Source
This commit is contained in:
Adam Bradley
2019-06-24 17:15:57 -05:00
committed by GitHub
parent 34dfc3ce98
commit 598a13ecc0
68 changed files with 0 additions and 7435 deletions
Download Patch File Download Diff File Expand all files Collapse all files

160
core/src/components/content/test/preview/index.html
View File

@@ -1,160 +0,0 @@
<!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">
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
<script src="../../../../../scripts/testing/scripts.js"></script>
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
<body>
<ion-app>
<ion-header translucent 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 class="ion-padding ion-text-center" id="content" fullscreen style="flex: 2">
<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 class="ion-padding" style="display: none" id="content3">
<f></f>
<f></f>
<f></f>
<f></f>
<f></f>
<f></f>
</ion-content>
</div>
<ion-content class="ion-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>