<msc-lightbox /> is a lightbox effect component. Developers could set trigger & content through it. Once user press trigger, content will display as lightbox effect.
npm install msc-lightbox 
<msc-lightbox /> is a lightbox effect component. Developers could set trigger & content through it. Once user press trigger, content will display as lightbox effect.
<msc-lightbox /> is a web component. All we need to do is put the required script into your HTML document. Then follow <msc-lightbox />'s html structure and everything will be all set.
- Required Script
``html`
type="module"
src="https://unpkg.com/msc-lightbox/mjs/wc-msc-lightbox.js">
- Structure
Put <msc-lightbox /> into HTML document.
`html
type="button"
slot="trigger"
>
SHOW IMAGE
src="your-image-path.png"
loading="lazy"
slot="content"
/>
`
Remember set [slot=trigger] and [slot=content] inside <msc-lightbox /> as its children. Content element will popup when user press trigger element.
<msc-lightbox /> could also use JavaScript to create DOM element. Here comes some examples.
`html`
<msc-lightbox /> uses CSS custom properties to hook control panel's theme. That means developer could easy change it into the looks you like.
`html`
| Property Name | Type | Description |
| ----------- | ----------- | ----------- |
| open | Boolean | Getter <msc-lightbox />'s open state. |
. |
| msc-lightbox-toggle | Fired when <msc-lightbox /> is shown or hidden. Developers could gather state information through event.detail`. |