modal

An LWC modal with easy to use sizes, attributes and slots 🎰

API

Functions

Syntax	Description	Usage
open	open model from outside	this.template.querySelector('c-modal').open()
close	close model from outside	this.template.querySelector('c-modal').close()
isOpen	check modal from outside	this.template.querySelector('c-modal').isOpen()

Attributes

Syntax	Description	Usage
header	header / title for modal	header="My Title"
trigger	optional text that triggers / opens modal	trigger="Click Me"
variant	size of modal (large, medium, small)	variant="large"

Slots

Syntax	Description	Usage
header	header content	<span slot="header"> { DOM to render } </span>
content	content for the body of the modal	<span slot="content"> { DOM to render } </span>
footer	footer content	<span slot="footer"> { DOM to render } </span>
footer-center	footer content to be centered	<span slot="footer-center"> { DOM to render } </span>
trigger	optionally trigger modal from DOM content	<span slot="trigger"> { DOM to render } </span>

Usage

Two example implementations are here -- works well with lwc local dev server

📌 Can use any combo of slots and attributes (slots override attributes if both are given)

Create a simple modal using attributes and the content slot for content:

<c-modalheader="This is a header"
trigger="Text to trigger modal"><spanslot="content"><templatefor:item="thing" for:each={data.things}>
{thing.avatar} {thing.name} <brkey={thing.name}/></template></span></c-modal>

Or highly customize by using slots:

<c-modalvariant="large"><spanslot="trigger"><lightning-pilllabel="Open modal using the trigger slot instead of the trigger attribute to pass in DOM instead of text"
></lightning-pill></span><spanslot="header"><ahref="lwc.land" target="_blank">
This is a custom header using the header slot instead of the header attribute to pass in DOM instead of text
</a></span><spanslot="content"><templatefor:item="thing" for:each={data.things}>
{thing.avatar} {thing.name} <brkey={thing.name}/></template></span><spanslot="footer"><lightning-buttonlabel="Can pass in DOM like buttons to add the the modal's footer"
variant="brand"
onclick={demo_click}></lightning-button></span></c-modal>

Deploy

sfdx force:source:deploy -p force-app/main/default/lwc/modal

📌 Above deploys to the default org set; Add -u user@domain.com or -u alias to deploy else where

Results should more or less mirror below

jamie@the-gene:~/repo/modal$ sfdx force:source:deploy -p force-app/main/default/lwc/modal -u some-org
Deploy ID: 0Af1700002qWfDOCA0
DEPLOY PROGRESS | ████████████████████████████████████████ | 1/1 Components
=== Deployed Source
FULL NAME TYPE PROJECT PATH ───────── ──────────────────────── ────────────────────────────────────────────────── modal LightningComponentBundle force-app/main/default/lwc/modal/modal.css modal LightningComponentBundle force-app/main/default/lwc/modal/modal.html modal LightningComponentBundle force-app/main/default/lwc/modal/modal.js modal LightningComponentBundle force-app/main/default/lwc/modal/modal.js-meta.xml Deploy Succeeded.

Deploy Singular

sfdx force:source:deploy -p force-app/main/default/lwc/modal -u some-org

---

written with 💙 by Jamie Smith