Svelte Modal Custom Element
Svelte Modal Custom Element
This repository contains a project for a modal custom element created with Svelte.
Installation
npm i @whoisyeshua-svelte/modal-custom-element
Usage
Svelte Projects
You can import and use it as normal svelte component (don`t forget to add /svelte at the end of the package name):
<script lang="ts">
import { Modal } from '@whoisyeshua-svelte/modal-custom-element/svelte'
let open = false
</script>
<Modal {open} on:close={() => open = false}>
<h2 style="margin: 0" slot="header">Header</h2>
<p>Main content</p>
</Modal>
<button on:click={() => open = true}>Show</button>
ESM projects
You can connect and use it like custom element (<svelte-modal> tag):
your html:
<body>
<button id="open-modal">Open modal</button>
<svelte-modal>
<h2 slot="header" style="margin: 0">Header</h2>
<p>This is some slotted content</p>
</svelte-modal>
<style>
/* hide while the script is loading and element is not defined */
svelte-modal:not(:defined) {
display: none;
}
</style>
<script type="module" src="/src/main.ts"></script>
</body>
your entrypoint /src/main.ts or /src/main.js file:
import '@whoisyeshua-svelte/modal-custom-element/esm'
const modal = document.querySelector('svelte-modal')!
const openModalBtn = document.querySelector('#open-modal')!
const handleOpen = () => {
modal.open = true
}
const handleClose = () => {
modal.open = false
}
openModalBtn.addEventListener('click', handleOpen)
modal.addEventListener('close', handleClose) // or modal.onClose = handleClose
@whoisyeshua-svelte/modal-custom-element under the hood define custom component (<svelte-modal>), so you could use it from start
or like regular svelte component construcotr:
import { Modal } from '@whoisyeshua-svelte/modal-custom-element/esm'
let open = false
new Modal({
target: document.body,
props: {
// component props go here
open,
onClose: () => (open = true)
}
})
- Note that this esm build relies on your bundler (vite, rollup, webpack and etc), it comes without the
sveltepackage built in, so your builder will have to add it. For this purpose we setsvelte@^4.0.0topeerDependencies.
Vanilla HTML / JS (through <script> tag)
CDN URL - https://cdn.jsdelivr.net/npm/@whoisyeshua-svelte/[email protected]
<script src="https://cdn.jsdelivr.net/npm/@whoisyeshua-svelte/[email protected]"></script>
full code example:
<body>
<button id="open-modal">Open modal</button>
<svelte-modal>
<h2 slot="header" style="margin: 0">Header</h2>
<p>This is some slotted content</p>
</svelte-modal>
<style>
/* hide while the script is loading and element is not defined */
svelte-modal:not(:defined) {
display: none;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/@whoisyeshua-svelte/[email protected]"></script>
<script>
const modal = document.querySelector('svelte-modal')
const openModalBtn = document.querySelector('#open-modal')
const handleOpen = () => {
modal.open = true
}
const handleClose = () => {
modal.open = false
}
openModalBtn.addEventListener('click', handleOpen)
modal.addEventListener('close', handleClose)
</script>
</body>
Customizing
Customizing svelte-modal CSS:
You can override the CSS custom properties within a parent component or your project's main CSS file to customize the appearance of the svelte-modal web component. Here's an example of how to override some of the custom properties:
svelte-modal {
--svelte-modal-dialog-w: 40em;
--svelte-modal-dialog-br: 2em;
--svelte-modal-dialog-backdrop-bg: rgba(0, 0, 0, 0.5);
}
List of CSS Custom Properties:
--svelte-modal-dialog-w: Controls the width of the dialog. Default value isclamp(20em, 33vw, 32em).--svelte-modal-dialog-br: Controls the border radius of the dialog. Default value is1em.--svelte-modal-dialog-backdrop-bg: Controls the background of the dialog's backdrop. Default value ishsla(0 0% var(--lightness) / 30%).--svelte-modal-dialog-backdrop-filter: Controls the filter of the dialog's backdrop. Default value isblur(10px).--svelte-modal-dialog-padding: Controls the padding inside the dialog's div. Default value is1em.--svelte-modal-header-container-gap: Controls the gap between items in the header container. Default value is1em.--svelte-modal-button-w: Controls the width of the close button. Default value is32px.--svelte-modal-button-h: Controls the height of the close button. Default value is32px.--svelte-modal-button-br: Controls the border radius of the close button. Default value is100px.--svelte-modal-button-hover-bg: Controls the background color of the close button on hover. Default value ishsla(0 0% var(--lightness) / 10%).--svelte-modal-button-active-bg: Controls the background color of the close button on active. Default value ishsla(0 0% var(--lightness) / 25%).
Each custom property provides a way to customize a specific aspect of the svelte-modal component's appearance. By overriding these custom properties, you can tailor the modal's look to better fit your project's design requirements.
Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Clone this repository to your local machine:
git clone https://github.com/whoisYeshua/svelte-modal-custom-element.git
Navigate to the project directory:
cd svelte-modal-custom-element
Install the necessary dependencies:
npm install
Build package:
npm run package
Publish package:
npm publish
License
This project is licensed under the MIT License.
Top categories
Need a Svelte website built?
Hire a professional Svelte developer today.