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() |
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" |
is-active | Auto open modal on connectCallback | is-active |
empty | only use the view slot; No lightning card, header, footer, etc | empty |
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> |
view | For use with the empty attribute |
<span slot="view"> { DOM to render } </span> |
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)
<c-modal
header="This is a header"
trigger="Text to trigger modal">
<span slot="content">
<template for:item="thing" for:each={data.things} >
{thing.avatar} {thing.name} <br key={thing.name} />
</template>
</span>
</c-modal>
<c-modal variant="large">
<span slot="trigger">
<lightning-pill
label="Open modal using the trigger slot instead of the trigger attribute to pass in DOM instead of text"
></lightning-pill>
</span>
<span slot="header">
<a href="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>
<span slot="content">
<template for:item="thing" for:each={data.things} >
{thing.avatar} {thing.name} <br key={thing.name} />
</template>
</span>
<span slot="footer">
<lightning-button
label="Can pass in DOM like buttons to add the the modal's footer"
variant="brand"
onclick={demo_click}>
</lightning-button>
</span>
</c-modal>
sfdx force:source:deploy -p force-app/main/default/lwc/modal
๐ Above deploys to the default org set; Add -u [email protected]
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.
sfdx force:source:deploy -p force-app/main/default/lwc/modal -u some-org
written with ๐ by Jamie Smith