Skip to content

Commit ba157c7

Browse files
GrimLinkGrimLink
committed
IMP: example template
1 parent 093ff1e commit ba157c7

File tree

1 file changed

+165
-73
lines changed

1 file changed

+165
-73
lines changed

‎index.html‎

Lines changed: 165 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,80 +1,172 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>Test - @fylgja/alpinejs-dialog</title>
8-
<link href="https://unpkg.com/fylgja/fylgja.css" rel="stylesheet">
9-
<script defer src="https://unpkg.com/@fylgja/alpinejs-dialog/dist/index.min.js"></script>
10-
<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
11-
</head>
12-
<body>
13-
<main class="min-h-screen flex flex-col justify-center">
14-
<a href="https://fylgja.dev/" target="_blank" rel="noopener noreferrer" class="block py-8 mx-auto">
15-
<img
16-
src="https://raw.githubusercontent.com/fylgja/.github/main/assets/logo.svg"
17-
alt="Fylgja CSS"
18-
width="300"
19-
height="130"
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Test - @fylgja/alpinejs-dialog</title>
8+
<link href="https://unpkg.com/fylgja/fylgja.css" rel="stylesheet" />
9+
<!-- <script defer src="https://unpkg.com/@fylgja/alpinejs-dialog/dist/index.min.js"></script> -->
10+
<!-- <script defer src="./dist/index.min.js"></script> -->
11+
<script defer type="module" src="./src/cdn.js"></script>
12+
<script
13+
defer
14+
src="https://unpkg.com/[email protected]/dist/cdn.min.js"
15+
></script>
16+
</head>
17+
<body>
18+
<main class="min-h-screen flex flex-col justify-center">
19+
<a
20+
href="https://fylgja.dev/"
21+
target="_blank"
22+
rel="noopener noreferrer"
23+
class="block py-8 mx-auto"
2024
>
21-
</a>
22-
<div x-data="{ openModal: false, openOffcanvas: false }" class="mt-8">
23-
<div class="flex flex-wrap justify-center"
24-
style="font-size: clamp(1rem, 1.2vw, 1.25rem); --btn-border-width: 2px;">
25-
<button class="btn -theme m-1" @click="openModal = !openModal">Open Alpine Dialog Modal</button>
26-
<button class="btn -outline m-1" @click="openOffcanvas = !openOffcanvas">Open Alpine Dialog
27-
Offcanvas</button>
28-
</div>
29-
30-
<dialog x-show="openModal" x-htmldialog.noscroll="openModal = false">
31-
<div class="dialog-header flex justify-between items-center border-block-end pb-4 mb-4">
32-
<span class="h3 my-0">Fylgja Dialog Modal</span>
33-
<button class="btn -icon" @click="openModal = false">X</button>
25+
<img
26+
src="https://raw.githubusercontent.com/fylgja/.github/main/assets/logo.svg"
27+
alt="Fylgja CSS"
28+
width="300"
29+
height="130"
30+
/>
31+
</a>
32+
<div
33+
x-data="{ openModal: false, openOffcanvas: false }"
34+
x-init="$watch('openModal', value => console.log('Modal open:', value))"
35+
class="mt-8"
36+
>
37+
<div
38+
class="flex flex-wrap justify-center"
39+
style="
40+
font-size: clamp(1rem, 1.2vw, 1.25rem);
41+
--btn-border-width: 2px;
42+
"
43+
>
44+
<button
45+
class="btn -theme m-1"
46+
@click="openModal = !openModal"
47+
>
48+
Open Alpine Dialog Modal
49+
</button>
50+
<button
51+
class="btn -outline m-1"
52+
@click="openOffcanvas = !openOffcanvas"
53+
>
54+
Open Alpine Dialog Offcanvas
55+
</button>
3456
</div>
35-
<div class="dialog-inner">
36-
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
37-
<p>
38-
Magnam, debitis dolor unde ab veritatis repellat hic!<br>
39-
Cum hic corporis earum nemo facilis obcaecati soluta sapiente quia iure.<br>
40-
Sequi, molestiae eos!
57+
58+
<dialog
59+
x-show="openModal"
60+
x-htmldialog.noscroll="openModal = false"
61+
>
62+
<div
63+
class="dialog-header flex justify-between items-center border-block-end pb-4 mb-4"
64+
>
65+
<span class="h3 my-0">Fylgja Dialog Modal</span>
66+
<button class="btn -icon" @click="openModal = false">
67+
X
68+
</button>
69+
</div>
70+
<form
71+
action="#"
72+
method="dialog"
73+
class="dialog-inner flow mb-4"
74+
>
75+
<p>
76+
Lorem ipsum dolor sit amet consectetur adipisicing
77+
elit.
78+
</p>
79+
<label>
80+
<span>Preview of a form field</span>
81+
<input
82+
type="text"
83+
placeholder="Lorum Ipsum"
84+
required
85+
/>
86+
</label>
87+
<div class="flex mt-4">
88+
<button type="reset" class="btn -outline me-2">
89+
Reset
90+
</button>
91+
<button class="btn -theme" type="submit">
92+
Submit
93+
</button>
94+
</div>
95+
</form>
96+
<p class="weight-bold">
97+
Also
98+
<a
99+
href="https://fylgja.dev/components/dialog/"
100+
target="_blank"
101+
rel="noopener noreferrer"
102+
>
103+
checkout the Fylgja Dialog,
104+
</a>
105+
that powers all the styling for the dialog
41106
</p>
42-
</div>
43-
<p class="weight-bold">
44-
Also
45-
<a href="https://fylgja.dev/components/dialog/" target="_blank" rel="noopener noreferrer">
46-
checkout the Fylgja Dialog,
47-
</a>
48-
that powers all the styling for the dialog
49-
</p>
50-
</dialog>
107+
</dialog>
51108

52-
<dialog x-show="openOffcanvas" x-htmldialog.noscroll="openOffcanvas = false" class="offcanvas">
53-
<div class="dialog-header flex justify-between items-center border-block-end pb-4 mb-4">
54-
<span class="h3 my-0">Fylgja Dialog Offcanvas</span>
55-
<button class="btn -icon" @click="openOffcanvas = false">X</button>
56-
</div>
57-
<div class="dialog-inner">
58-
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
59-
<p>
60-
Magnam, debitis dolor unde ab veritatis repellat hic!<br>
61-
Cum hic corporis earum nemo facilis obcaecati soluta sapiente quia iure.<br>
62-
Sequi, molestiae eos!
109+
<dialog
110+
x-show="openOffcanvas"
111+
x-htmldialog.noscroll="openOffcanvas = false"
112+
class="offcanvas"
113+
>
114+
<div
115+
class="dialog-header flex justify-between items-center border-block-end pb-4 mb-4"
116+
>
117+
<span class="h3 my-0">Fylgja Dialog Offcanvas</span>
118+
<button
119+
class="btn -icon"
120+
@click="openOffcanvas = false"
121+
>
122+
X
123+
</button>
124+
</div>
125+
<div class="dialog-inner">
126+
<p>
127+
Lorem ipsum dolor sit amet consectetur adipisicing
128+
elit.
129+
</p>
130+
<p>
131+
Magnam, debitis dolor unde ab veritatis repellat
132+
hic!<br />
133+
Cum hic corporis earum nemo facilis obcaecati soluta
134+
sapiente quia iure.<br />
135+
Sequi, molestiae eos!
136+
</p>
137+
</div>
138+
<p class="weight-bold">
139+
Also
140+
<a
141+
href="https://fylgja.dev/components/dialog/"
142+
target="_blank"
143+
rel="noopener noreferrer"
144+
>
145+
checkout the Fylgja Dialog,
146+
</a>
147+
that powers all the styling for the dialog
63148
</p>
64-
</div>
65-
<p class="weight-bold">
66-
Also
67-
<a href="https://fylgja.dev/components/dialog/" target="_blank" rel="noopener noreferrer">
68-
checkout the Fylgja Dialog,
69-
</a>
70-
that powers all the styling for the dialog
71-
</p>
72-
</dialog>
73-
</div>
74-
<div class="container py-12" style="--container-size: 68ch">
75-
<div class="relative border-3" style="border-radius: 0.5em">
76-
<div class="absolute inset-0 transform" style="--tx: 1em; --ty: 1em; border: inherit; border-radius: inherit"></div>
77-
<pre class="relative my-0" style="--code-stroke: transparent; --code-bg: #fff; --code-font-size: 1rem;">
149+
</dialog>
150+
</div>
151+
<div class="container py-12" style="--container-size: 68ch">
152+
<div class="relative border-3" style="border-radius: 0.5em">
153+
<div
154+
class="absolute inset-0 transform"
155+
style="
156+
--tx: 1em;
157+
--ty: 1em;
158+
border: inherit;
159+
border-radius: inherit;
160+
"
161+
></div>
162+
<pre
163+
class="relative my-0"
164+
style="
165+
--code-stroke: transparent;
166+
--code-bg: #fff;
167+
--code-font-size: 1rem;
168+
"
169+
>
78170
<code>&lt;script src="//unpkg.com/@fylgja/alpinejs-dialog" defer&gt;&lt;/script&gt;</code>
79171
<code>&lt;script src="//unpkg.com/alpinejs" defer&gt;&lt;/script&gt;</code>
80172
<code>&nbsp;</code>
@@ -85,8 +177,8 @@
85177
<code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Content...</code>
86178
<code>&nbsp;&nbsp;&nbsp;&nbsp;&lt;/dialog&gt;</code>
87179
<code>&lt;/div&gt;</code></pre>
180+
</div>
88181
</div>
89-
</div>
90-
</main>
91-
</body>
182+
</main>
183+
</body>
92184
</html>

0 commit comments

Comments
 (0)