https://github.com/jsmithdev/modal
An LWC modal with easy to use sizes, attributes and slots :slot_machine:
https://github.com/jsmithdev/modal
lightning-web-components lightningwebcomponents lwc salesforce
Last synced: 4 months ago
JSON representation
An LWC modal with easy to use sizes, attributes and slots :slot_machine:
- Host: GitHub
- URL: https://github.com/jsmithdev/modal
- Owner: jsmithdev
- Created: 2019-10-25T08:12:01.000Z (over 6 years ago)
- Default Branch: main
- Last Pushed: 2023-07-30T06:48:36.000Z (almost 3 years ago)
- Last Synced: 2025-01-28T23:15:17.074Z (over 1 year ago)
- Topics: lightning-web-components, lightningwebcomponents, lwc, salesforce
- Language: HTML
- Homepage:
- Size: 29.3 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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 | ` { DOM to render } ` |
| content | content for the body of the modal | ` { DOM to render } ` |
| footer | footer content | ` { DOM to render } ` |
| footer-center | footer content to be centered | ` { DOM to render } ` |
| trigger | optionally trigger modal from DOM content |` { DOM to render } ` |
## Usage
Two example implementations are [here](force-app/main/default/lwc/exampleModal/exampleModal.html) -- 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:
```html
{thing.avatar} {thing.name}
```
### Or highly customize by using slots:
```html
{thing.avatar} {thing.name}
```
## Deploy
```bash
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
```bash
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
```bash
sfdx force:source:deploy -p force-app/main/default/lwc/modal -u some-org
```
---
written with 💙 by Jamie Smith