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

| props | type | description | | --------------------- | -------------------------- | ----------------------------------------------------------- | | id | string | none | | isOpen | false | false | | center | false | false | | className | string | none | | tabIndex | number | -1 | | showHeader | boolean | true | | showFooter | boolean | true | | modalTitle | string | empty | | alignFooter | string | right / left / center | | fullButtonMobile | boolean | true | | showExtraButton | boolean | false | | showAcceptButton | boolean | true | | showCancelButton | boolean | true | | showXClose | boolean | true | | disabledClose | boolean | false: disabled all close | | closeOnEsc | boolean | true: close when escapse | | lockBodyScroll | boolean | true: fix body no scroll when modal shown | | outSideClose | boolean | true: close when outside click | | showSplitBorder | boolean | true | | enableToggleTitle | boolean | false: enable maximum modal | | isMaximize | boolean | false: show maximum | | classNameAccept | string | none | | classNameCancel | string | none | | classNameExtra | string | none | | labelAccept | string | OK | | labelCancel | string | CANCEL | | labelExtra | string | EXTRA | | backdropDark | boolean | false: background backrop | | evt | | | | onMaximize | function | (toggle) => {} | | onAccept | function | () => {} | | onCancel | function | none - default cancel | | onEscapse | function | none - default cancel | | onXClose | function | none - default cancel | | onExtra | function | () => {} | | onOpen | function | (isOpen) => {} | | transition | | https://svelte.dev/docs#transition_fn | | transitionBg | 'fade' // blur fly, slide | Transition function | | transitionBgProps | { duration: 300 } | @type {BlurParams / FadeParams / FlyParams / SlideParams} | | transitionWindow | 'fade' // blur fly, slide | Transition function | | transitionWindowProps | { duration: 300 } | @type {BlurParams / FadeParams / FlyParams / SlideParams} |

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