Skip to content

Commit d403556

Browse files
kumibrrkumibrr
committed
added showcase
1 parent e4740da commit d403556

File tree

1 file changed

+144
-0
lines changed
  • core/src/components/header/test/condense-modal

1 file changed

+144
-0
lines changed

‎core/src/components/header/test/condense-modal/index.html‎

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Modal - Basic</title>
6+
<meta
7+
name="viewport"
8+
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
9+
/>
10+
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
11+
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
12+
<script src="../../../../../scripts/testing/scripts.js"></script>
13+
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
14+
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
15+
<style>
16+
:root {
17+
--ion-safe-area-top: 20px;
18+
--ion-safe-area-bottom: 20px;
19+
--ion-safe-area-right: 20px;
20+
--ion-safe-area-left: 20px;
21+
}
22+
</style>
23+
</head>
24+
25+
<body>
26+
<ion-app>
27+
<div class="ion-page">
28+
<ion-header>
29+
<ion-toolbar>
30+
<ion-title>Header condense-modal</ion-title>
31+
</ion-toolbar>
32+
</ion-header>
33+
34+
<ion-content class="ion-padding">
35+
<button id="basic-modal" onclick="presentModal()">Present modal with mode=ios</button>
36+
</ion-content>
37+
</div>
38+
</ion-app>
39+
40+
<script>
41+
window.addEventListener('ionModalDidDismiss', function (e) {
42+
console.log('DidDismiss', e);
43+
});
44+
window.addEventListener('ionModalWillDismiss', function (e) {
45+
console.log('WillDismiss', e);
46+
});
47+
48+
function createModal() {
49+
// create component to open
50+
const element = document.createElement('div');
51+
element.innerHTML = `
52+
<ion-header translucent="true" id="smallTitleHeader">
53+
<div style="position: absolute; left: 0; right: 0; bottom: 0">
54+
<img style="transform: rotate(180deg)" src="/src/components/header/test/img.jpg" />
55+
</div>
56+
<ion-toolbar>
57+
<ion-title>Header</ion-title>
58+
</ion-toolbar>
59+
</ion-header>
60+
<ion-content fullscreen="true">
61+
<ion-header collapse="condense" id="largeTitleHeader" mode="ios">
62+
<ion-toolbar>
63+
<ion-title size="large">Header</ion-title>
64+
</ion-toolbar>
65+
</ion-header>
66+
<div class="ion-padding">
67+
<ion-button>Close Modal</ion-button>
68+
<h1>Content</h1>
69+
70+
<p>
71+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas blandit, justo vitae rhoncus porttitor,
72+
massa elit molestie nisl, ut tincidunt orci enim ac ante. Vestibulum tincidunt dignissim elit. Morbi
73+
cursus hendrerit turpis, ut egestas tortor pulvinar sit amet. Interdum et malesuada fames ac ante ipsum
74+
primis in faucibus. Phasellus faucibus consequat purus vel mollis. Ut ultricies elit nunc. Quisque
75+
ultrices turpis vel augue auctor accumsan. Donec bibendum at nisi vel finibus. Fusce id imperdiet odio.
76+
Morbi orci ipsum, imperdiet ut iaculis sit amet, suscipit vulputate felis. Nullam arcu leo, volutpat eu
77+
porttitor sed, fringilla et arcu. Pellentesque ac libero sapien. Quisque id dui velit. Mauris et pretium
78+
tortor.
79+
</p>
80+
<p>
81+
Ut ultricies id augue vel aliquam. Etiam ornare finibus nisl, nec egestas urna. Nam pellentesque libero
82+
nec justo tristique lacinia. In sit amet gravida metus, ac tincidunt mauris. Fusce sit amet tempus turpis.
83+
Nulla ligula nunc, vestibulum quis quam in, feugiat aliquet nibh. Quisque in ante non nulla luctus gravida
84+
vel at lacus. Vivamus erat magna, elementum et dignissim nec, posuere eu ante. Praesent elementum, arcu
85+
scelerisque venenatis sodales, turpis nulla aliquam urna, id hendrerit est orci et purus. Duis sem ipsum,
86+
imperdiet eu elit id, tincidunt tempus sapien. Praesent tincidunt, sapien sed rhoncus euismod, lectus
87+
velit ornare nunc, dapibus varius turpis leo ut magna.
88+
</p>
89+
<p>
90+
Nam quis quam id ante mattis pulvinar non sed mauris. Donec tempor sed nulla at semper. Vivamus ac nunc
91+
bibendum, ullamcorper lacus quis, ornare massa. Cras gravida nibh risus, id sollicitudin eros ultricies
92+
non. Integer velit massa, suscipit tincidunt rhoncus ut, lacinia et nisl. Maecenas volutpat ipsum blandit
93+
sollicitudin lobortis. Suspendisse potenti. Cras non mi non arcu varius dapibus. Suspendisse maximus eget
94+
justo a lobortis. Donec nulla ipsum, efficitur eget velit eget, varius rutrum quam. Nulla metus risus,
95+
accumsan a tellus ac, faucibus blandit quam. Donec luctus, nisl ac ultricies ornare, nunc elit finibus
96+
magna, id elementum ante urna congue ex. Cras condimentum nisi sollicitudin tortor vestibulum luctus.
97+
Curabitur non ipsum et ex vestibulum congue.
98+
</p>
99+
<p>
100+
Maecenas rhoncus elit ut consectetur faucibus. Etiam sed sem sed mauris condimentum viverra sit amet at
101+
nibh. Mauris bibendum at purus a cursus. Suspendisse potenti. Donec vel lacus ac odio euismod lacinia id
102+
in urna. Donec commodo ipsum augue, at bibendum ex convallis suscipit. Nulla ac rhoncus odio. Aenean
103+
elementum est nec arcu ultricies dignissim.
104+
</p>
105+
<p>
106+
Sed tincidunt bibendum massa, egestas bibendum est imperdiet vitae. Fusce dignissim consectetur ante a
107+
fermentum. Morbi suscipit turpis sapien. Suspendisse eleifend sapien eget nunc mattis mattis. Phasellus
108+
rhoncus sodales libero a imperdiet. Nam in vulputate lectus. Proin accumsan enim non nibh sagittis
109+
ultricies. Nullam vitae ultricies nunc. Nullam ultrices dolor nec vehicula posuere.
110+
</p>
111+
</div>
112+
</ion-content>
113+
<ion-footer translucent="true">
114+
<ion-toolbar>
115+
<ion-title>Footer</ion-title>
116+
</ion-toolbar>
117+
</ion-footer>
118+
`;
119+
120+
// present the modal
121+
const modalElement = Object.assign(document.createElement('ion-modal'), {
122+
component: element,
123+
htmlAttributes: {
124+
'data-testid': 'basic-modal',
125+
},
126+
});
127+
// listen for close event
128+
const button = element.querySelector('ion-button');
129+
button.addEventListener('click', () => {
130+
modalElement.dismiss();
131+
});
132+
document.body.appendChild(modalElement);
133+
return modalElement;
134+
}
135+
136+
async function presentModal() {
137+
const presentingEl = document.querySelectorAll('.ion-page')[1];
138+
const modal = createModal();
139+
await modal.present(presentingEl);
140+
}
141+
142+
</script>
143+
</body>
144+
</html>

0 commit comments

Comments
 (0)