https://github.com/jsmithdev/extenda-modal
Downstream of https://github.com/jsmithdev/modal
https://github.com/jsmithdev/extenda-modal
Last synced: 12 months ago
JSON representation
Downstream of https://github.com/jsmithdev/modal
- Host: GitHub
- URL: https://github.com/jsmithdev/extenda-modal
- Owner: jsmithdev
- Created: 2023-08-20T05:38:26.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-01-24T00:16:04.000Z (over 2 years ago)
- Last Synced: 2025-03-23T17:22:45.569Z (about 1 year ago)
- Language: HTML
- Size: 34.2 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# extenda-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"` |
| is-active | Auto open modal on connectCallback | `is-active` |
| empty | only use the view slot; No lightning card, header, footer, etc | `empty` |
### 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 } ` |
| view | For use with the `empty` attribute |` { 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