THEMETRIAL

Modern ES6 Modal Dialog Web Component – magnit-modal

Author:catapart
Views Total:0 views
Official Page:Go to website
Last Update:May 1, 2021
License:MIT

Preview:

Modern ES6 Modal Dialog Web Component – magnit-modal

Description:

magnit-modal is a JavaScript (ES6) modal web component designed for creating custom alerts, prompt dialogs, confirm popups, and content modals on the web app.

Features:

  • 5 themes: Default, Info, Success, Warning, and Info.
  • Modal In Modal. Allows multiple modals.
  • Supports dynamic modal content.

How to use it:

1. Import the magnit-modal JavaScript library as a web component.

<script defer type="module">
  import MagnitModalComponent from './dist/magnit-modal.component.min.js';
</script>

2. Add the <magnit-modal /> component to the web app. Available slots:

  • title-icon: Title icon
  • title: Modal title
  • controls: Custom controls displayed in the top-right of the modal. Useful for “close” or “settings” function
  • content: Modal content
  • choices: Useful for confirmation dialog (see below)
<magnit-modal class="simple" style="display:none;">
  <div slot="content">
    <div class="icon-container">
      <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M16.142 2l5.858 5.858v8.284l-5.858 5.858h-8.284l-5.858-5.858v-8.284l5.858-5.858h8.284zm.829-2h-9.942l-7.029 7.029v9.941l7.029 7.03h9.941l7.03-7.029v-9.942l-7.029-7.029zm-5.971 6h2v8h-2v-8zm1 12.25c-.69 0-1.25-.56-1.25-1.25s.56-1.25 1.25-1.25 1.25.56 1.25 1.25-.56 1.25-1.25 1.25z"/></svg>
    </div>
    <div class="message">
      <h5 class="heading">Simple Modal</h5>
      <p class="detail">This is a simple message modal.</p>
    </div>
  </div>
</magnit-modal>

3. Show an ‘OK’ button inside the modal.

<magnit-modal class="simple" style="display:none;" type="message">
  ...
</magnit-modal>

4. Determine the theme of the modal:

<magnit-modal class="info" style="display:none;" type="message">
  ...
</magnit-modal>

<magnit-modal class="success" style="display:none;" type="message">
  ...
</magnit-modal>

<magnit-modal class="warning" style="display:none;" type="message">
  ...
</magnit-modal>

<magnit-modal class="error" style="display:none;" type="message">
  ...
</magnit-modal>

5. Available attributes to customize the modal.

  • type: Set to message if you want to display an OK button
  • close-button: Whether or not to show the Close button
  • use-shade: Whether or not to dim the main content
  • shade-close: Clicking anywhere on the shade element to close the modal
<magnit-modal class="info" style="display:none;" use-shade="true" type="message">
  ...
</magnit-modal>

6. Open the modal.

const $modal = document.querySelector('magnit-modal.simple');
$modal.open();

7. The example below shows how to create a confirmation dialog using the ask() method.

<magnit-modal class="choice" style="display:none;">
  <div slot="content">
    <h5 class="heading">Select One</h5>
  </div>
  <ul slot="choices">
    <li><button class="a" type="button">Choice 1</button></li>
    <li><button class="b" type="button">Choice 2</button></li>
    <li><button class="c" type="button">Choice 3</button></li>
  </ul>
</magnit-modal>
const $choiceModal = document.querySelector('magnit-modal.choice');
const $choice = await $choiceModal.ask();
console.log($choice);


Source link

Add comment

NOTE :

All visitors can share my site’s content on their blogs, sites, and social networks to enrich the content

Only share the source www.themetrial.com

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.