svelte-modal-z v2.0.0-np

Description

• Svelte modal (component)
• Simple and beauty
• from FLOWBITE-SVELTE (New Modal)
• Fix >= v.2.0.0

Usage

Install the package

npm install --save svelte-modal-z

Import the module in the place you want to use:

import "svelte-modal-z/modal/styles.css";
import Modal from "svelte-modal-z";

Snippet

    let show = false;

    onMount(() => {
      setTimeout(() => {
        show = true
      }, 1000)
    })

    const handleShow = (isShow) => {
      show = isShow;
    }

    <Modal
      isOpen={show}
      onOpen={handleShow} // when close modal
      toggleTitleExpand={true}
      modalTitle="this is title"
    >
      This is modal. // default this is content

      {/* <span slot="modalXClose"></span> */}
      {/* <span slot="modalTitle"></span> */}
      {/* <span slot="modalHeader"></span> */}
      {/* <span slot="modalFooter"></span> */}
    </Modal>

props

see index.d.ts

Note

• use on(ABC) for event, not createEventDispatcher (svelte)
• class for button action: modal2-danger-button, modal2-light-button, modal2-primary-button, modal2-secondary-button
• disabledClose => no apply escapse, no display cancel and xclose.
• escapeClose => make sure you don't use 3rd library to close by escapse.
• some case: set position: relative; for body
• More: write share context or eventbus-e2z to write common.

RUN

Ver.2 use svelte-kit

buid: from node v12.20.2 (npm v6.14.11)

LIVE EXAMPLE

License

MIT