compose-dialog

3.1.1 • Public • Published

Dialog Build Status

A nice dialog component.

Preview

Installation

  • npm install compose-dialog
  • Profit.

Usage

There are a few ways to instantiate a dialog.

DOM only (almost)

Using the data-dialog-title="Some title" attribute on anything will trigger showing a Dialog with the provided options (as data-dialog attributes.)

<button class="btn" 
  data-dialog-title="Leaving Already?"
  data-dialog-description="But we were having so much fun…"
  data-dialog-continue="Peace out"
  data-dialog-close="Stick around"
  data-dialog-follow="/session/destroy/"
>Open a dialog</button>
<button
  data-dialog-confirm="true"
  data-dialog-title="Delete this user?"
  data-dialog-description="Deleting a user is a permanent action. Are you sure?"
>Delete User</button>

NOTE: You do have to require('compose-dialog') at some point though.

Programmatically

var Dialog = require('compose-dialog')
 
Dialog.show({ /* options */})

This will handle all there is to handle for showing a Dialog.

Options

dialog-if

Using data-dialog-if="[selector]" you can only trigger a dialog if the selector is found. So for example if you only want to show a dialog if a checkbox is checked.

data-dialog-title="Are you sure?" data-dialog-if="#form_id .dangerous-checkbox:checked"

Now when the element is clicked, the event will be stopped and the dialog will be shown only if the checkbox is checked.

Readme

Keywords

none

Package Sidebar

Install

npm i compose-dialog

Weekly Downloads

3

Version

3.1.1

License

MIT

Unpacked Size

32.7 kB

Total Files

9

Last publish

Collaborators

  • compose
  • imathis
  • jeromegn