@aegisjsproject/aegis-modal
v0.0.3
Published
An `<aegis-modal>` component built using [`@aegisjsproject/component`](https://npmjs.org/package/@aegisjsproject/component)
Downloads
6
Maintainers
Readme
@aegisjsproject/aegis-modal
An <aegis-modal>
component built using @aegisjsproject/component
,
offering full built-in accessibility, customization, and enhanced security.
Important differences compared to <dialog>
<aegis-modal>
is modal-only<aegis-modal>
SHOULD only be appended as a direct child of<body>
<aegis-modal>
automatically adds a sticky header and close button- Provides simple open/close animations
- Has an
autoremove
attribute to automatically remove the element once closed - Supports an optional
AbortController
in theshow({ signal })
method - Adds
whenOpened
andwhenClosed
getter methods, returning relevant promises - Adds a static
create()
method, which creates and optionally appends and opens if given asignal
Compatibility / polyfills
The entire AegisJSProject ecosystem requires support for Element.prototype.setHTML()
and Constructable Stylesheets.
Additionally, Promise.withResolvers()
as well as inert
are also required for proper functionality.
Such polyfills are not included to avoid the bloat/duplication of polyfills. However, an extensive polyfill script that ensures compatibility is available via:
<script type="application/javascript" defer="" referrerpolicy="no-referrer" crossorigin="anonymous" integrity="sha384-Shkrmxly5RI9mCU8DQr6l4VLVJzjPzgx9KP/f5i7pEcl7ZUt0wHiAweGjbpjU2d5" src="https://unpkg.com/@shgysk8zer0/[email protected]/all.min.js" fetchpriority="auto"></script>
Installation
Via CDN:
<script type="module" src="https://unpkg.com/@aegisjsproject/aegis-modal[@:version]/aegis-modal.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
Via npm
npm i @aegisjsproject/aegis-markdown
Via Git Submodule
git subomdule add https://github.com/AegisJSProject/aegis-modal [:destination]
Using <script type="importmap">
All @aegisjsproject/*
libraries are available and ready to use without a build
process such as webpack, but will require a <script type="importmap">
that includes
all dependencies:
Short & Basic
<script type="importmap">
{
"imports": {
"@aegisjsproject/": "https://unpkg.com/@aegisjsproject/"
}
}
</script>
More detailed & with versions
{
"imports": {
"@aegisjsproject/core/": "https://unpkg.com/@aegisjsproject/[email protected]/",
"@aegisjsproject/styles/": "https://unpkg.com/@aegisjsproject/[email protected]/",
"@aegisjsproject/component/": "https://unpkg.com/@aegisjsproject/[email protected]/",
"@aegisjsproject/aegis-modal/": "https://unpkg.com/@aegisjsproject/[email protected]/"
}
}
... or ...
<script type="importmap">
{
"imports": {
"@aegisjsproject/": "/node_modules/@aegisjsproject/"
}
}
</script>
Example
<aegis-modal>
<h1 slot="heading">Lorem Ipsum</h1>
<p>Error aut mollitia qui alias aut. Temporibus vitae impedit deserunt repellat voluptatibus et. Minima aut et tempore. Ut officiis sed consectetur. Voluptas praesentium ipsam rerum eligendi dolorum. Voluptatem similique omnis quis quidem.</p>
</aegis-modal>