ayo/lion

History

CircleCI 722421b18e chore: release new versions - @lion/calendar@0.6.5 - @lion/checkbox-group@0.5.4 - @lion/checkbox@0.3.4 - @lion/choice-input@0.5.4 - @lion/dialog@0.4.3 - @lion/field@0.8.4 - @lion/fieldset@0.6.4 - @lion/form-system@0.3.6 - @lion/form@0.4.4 - @lion/input-amount@0.5.4 - @lion/input-date@0.5.4 - @lion/input-datepicker@0.8.5 - @lion/input-email@0.5.4 - @lion/input-iban@0.5.5 - @lion/input-range@0.2.4 - @lion/input@0.5.4 - @lion/localize@0.8.4 - @lion/option@0.4.4 - @lion/overlays@0.11.3 - @lion/radio-group@0.5.4 - @lion/radio@0.3.4 - @lion/select-rich@0.9.4 - @lion/select@0.5.4 - @lion/switch@0.5.4 - @lion/textarea@0.5.5 - @lion/tooltip@0.7.3 - @lion/validate@0.6.4		2020-01-23 17:35:37 +00:00
..
src	fix: deleted obsolete overlay event names	2019-12-11 15:51:37 +01:00
stories	feat: improved storybook demos	2020-01-13 13:58:03 +01:00
test	fix: no longer use overlay templates	2019-12-01 16:03:04 +01:00
CHANGELOG.md	chore: release new versions	2020-01-23 17:35:37 +00:00
index.js	feat: refactor the overlay system implementations, docs and demos	2019-11-29 17:32:31 +01:00
lion-dialog.js	feat: refactor the overlay system implementations, docs and demos	2019-11-29 17:32:31 +01:00
package.json	chore: release new versions	2020-01-23 17:35:37 +00:00
README.md	feat: improved storybook demos	2020-01-13 13:58:03 +01:00

README.md

Dialog

lion-dialog is a component wrapping a modal dialog controller. Its purpose is to make it easy to use our Overlay System declaratively.

Live Demo/Documentation

See our storybook for a live demo and documentation

How to use

Installation

npm i --save @lion/dialog

import '@lion/dialog/lion-dialog.js';

Example

<lion-dialog>
  <div slot="content">
    This is a dialog
    <button @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}>x</button>
  <div>
  <button slot="invoker">Click me</button>
</lion-dialog>