Inline Confirmation Button Component In Pure JavaScript

Category: Javascript | March 27, 2019
Author:matthewp
Views Total:1,753 views
Official Page:Go to website
Last Update:March 27, 2019
License:MIT

Preview:

Inline Confirmation Button Component In Pure JavaScript

Description:

A pure JavaScript component which applies an inline confirmation experience to an action button you specify.

Clicking the action button to ask your users to confirm before performing an action.

See also:

How to use it:

Download and import the component:

<script type="module">
  import './mod.js';
</script>

The basic HTML markup.

<inline-confirmation>
  <span slot="confirm">Are you sure to delete it?</span>
  <button type="button" slot="content">Delete Me</button>
</inline-confirmation>

Enable the inline confirmation button.

let confirm = document.querySelector('inline-confirmation');
let btn = document.querySelector('button');
btn.addEventListener('click', () => {
  confirm.active = true;
});

Do something as your users confirm or cancel the action.

confirm.addEventListener('confirm', () => {
  // do something
});
confirm.addEventListener('cancel', () => {
  // do something
});

You Might Be Interested In:


Leave a Reply