@fylgja/alpinejs-dialog
Version:
Bring the power of AlpineJs to the HTML dialog
225 lines (219 loc) • 5.87 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Test - @fylgja/alpinejs-dialog</title>
<link
href="https://cdn.jsdelivr.net/npm/@fylgja/base/index.min.css"
rel="stylesheet"
/>
<link
href="https://cdn.jsdelivr.net/npm/@fylgja/tokens/css/index.min.css"
rel="stylesheet"
/>
<link
href="https://cdn.jsdelivr.net/npm/@fylgja/utilities/index.min.css"
rel="stylesheet"
/>
<link
href="https://cdn.jsdelivr.net/npm/@fylgja/base/theme.css"
rel="stylesheet"
/>
<style>
@media (prefers-color-scheme: dark) {
dialog {
--dialog-bg: var(--surface-color);
}
}
</style>
<!-- <script defer src="https://unpkg.com/@fylgja/alpinejs-dialog/dist/index.min.js"></script> -->
<script defer src="./dist/index.min.js"></script>
<!-- <script defer type="module" src="./src/cdn.js"></script> -->
<script
defer
src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"
></script>
</head>
<body>
<main class="container flex-col align-center">
<a
href="https://fylgja.dev/"
target="_blank"
rel="noopener noreferrer"
class="block"
style="--mx: auto; --py: var(--size-8)"
>
<img
src="https://raw.githubusercontent.com/fylgja/.github/main/assets/logo.svg"
alt="Fylgja CSS"
width="300"
height="130"
/>
</a>
<div
class="container"
style="
--py: var(--size-12);
--container-size: 68ch;
--container-gap: 0px;
"
>
<div
class="relative rounded flow-none"
style="border-width: 2px"
>
<div
class="absolute rounded-inherit"
style="
--z: -1;
--inset: 0;
--size: 100%;
border-width: inherit;
background: var(--surface-color);
translate: -1em -1em;
"
></div>
<pre
class="relative"
style="
--code-stroke: transparent;
--code-bg: var(--surface-color);
"
>
<code><script src="//unpkg.com/@fylgja/alpinejs-dialog" defer></script></code>
<code><script src="//unpkg.com/alpinejs" defer></script></code>
<code> </code>
<code><div x-data="{ open: false }"></code>
<code> <button @click="open = true">Expand</button></code>
<code> </code>
<code> <dialog x-show="open" x-htmldialog="open = false"></code>
<code> Content...</code>
<code> </dialog></code>
<code></div></code></pre>
</div>
</div>
<div
x-data="{ openModal: false, openOffcanvas: false }"
style="--my: var(--size-8) 0"
>
<div
class="flex-wrap gap align-center"
style="font-size: var(--font-size-fluid-1)"
>
<button
class="btn --primary"
@click="openModal = !openModal"
>
Open Alpine Dialog Modal
</button>
<button @click="openOffcanvas = !openOffcanvas">
Open Alpine Dialog Offcanvas
</button>
</div>
<dialog
x-show="openModal"
x-htmldialog.noscroll="openModal = false"
>
<div class="dialog-header flex gap align">
<span style="font-size: var(--font-size-fluid-2)"
>Fylgja Dialog Modal</span
>
<button @click="openModal = false">X</button>
</div>
<form action="#" method="dialog">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing
elit.
</p>
<label class="field">
<span>Preview of a form field</span>
<input
type="text"
placeholder="Lorum Ipsum"
required
/>
</label>
<div class="field flex-wrap gap">
<button type="reset">Reset</button>
<button type="submit">Submit</button>
</div>
</form>
<p>
Also
<a
href="https://fylgja.dev/library/base/"
target="_blank"
rel="noopener noreferrer"
>
checkout the Fylgja Base,
</a>
that powers all the styling for the dialog element
</p>
</dialog>
<dialog
x-show="openOffcanvas"
x-htmldialog.noscroll="openOffcanvas = false"
class="offcanvas"
>
<div class="flex gap align">
<span style="font-size: var(--font-size-fluid-2)"
>Fylgja Dialog Modal</span
>
<button @click="openOffcanvas = false">X</button>
</div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
<p>
Magnam, debitis dolor unde ab veritatis repellat hic!<br />
Cum hic corporis earum nemo facilis obcaecati soluta
sapiente quia iure.<br />
Sequi, molestiae eos!
</p>
<hr />
<p>
Also
<a
href="https://fylgja.dev/library/base/"
target="_blank"
rel="noopener noreferrer"
>
checkout the Fylgja Base,
</a>
that powers all the styling for the dialog element
</p>
</dialog>
</div>
<blockquote
class="container"
style="--container-size: 68ch; --container-gap: 0px"
>
<p>
Meet <code>x-htmldialog</code>, an Alpine.js plugin that
makes working with native HTML
<code><dialog></code> elements a breeze. Attach the
<code>x-htmldialog</code> directive to your x-show elements
to unlock native modal functionality, with default support
for escape key and backdrop closing.
</p>
<p>
<a
href="https://fylgja.dev/library/extensions/alpinejs-dailog/"
>
See the full details on fylgja.dev.
</a>
</p>
</blockquote>
<p>
<em>
More Dialog examples are found on the
<a href="https://fylgja.dev/ui/">
UI Components on Fylgja.dev
</a>
</em>
</p>
</main>
</body>
</html>