ayo/lion

History

Aymen Ben Amor f33ea6b0b0 feat(overlays): enhance content projection for styling purposes Co-authored-by: Thijs Louisse <thijs.louisse@ing.com> Co-authored-by: Joren Broekema <joren.broekema@ing.com>		2020-05-17 17:27:29 +02:00
..
src	feat(overlays): enhance content projection for styling purposes	2020-05-17 17:27:29 +02:00
stories	docs(overlay): adding link to Overlay System - Configuration	2020-03-19 10:41:46 +01:00
test	feat(overlays): enhance content projection for styling purposes	2020-05-17 17:27:29 +02:00
CHANGELOG.md	chore: release new versions	2020-05-06 15:22:51 +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-05-06 15:22:51 +00:00
README.md	chore: remove pilot phase header	2020-04-29 10:05:06 +02: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>