e51bf720e5
- @lion/button@0.4.4 - @lion/calendar@0.5.5 - @lion/checkbox-group@0.4.2 - @lion/checkbox@0.2.12 - @lion/choice-input@0.4.10 - @lion/dialog@0.3.1 - @lion/field@0.7.0 - @lion/fieldset@0.5.5 - @lion/form-system@0.2.13 - @lion/form@0.3.12 - @lion/input-amount@0.4.1 - @lion/input-date@0.4.1 - @lion/input-datepicker@0.7.1 - @lion/input-email@0.4.1 - @lion/input-iban@0.4.1 - @lion/input@0.4.1 - @lion/option@0.3.10 - @lion/overlays@0.10.0 - @lion/radio-group@0.4.3 - @lion/radio@0.2.12 - @lion/select-rich@0.8.5 - @lion/select@0.4.1 - @lion/switch@0.4.0 - @lion/textarea@0.4.1 - @lion/tooltip@0.6.0 - @lion/validate@0.5.3 |
||
|---|---|---|
| .. | ||
| src | ||
| stories | ||
| test | ||
| CHANGELOG.md | ||
| index.js | ||
| lion-dialog.js | ||
| package.json | ||
| 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
With regards to modal dialogs, this is one of the more commonly used examples of overlays.
Features
- Show content when clicking the invoker
- Respond to close event in the slot="content" element, to close the content
- Have a
.configobject to set or update the OverlayController's configuration
How to use
Installation
npm i --save @lion/dialog
import '@lion/dialog/lion-dialog.js';
Example
html`
<lion-dialog.config=${{
viewportConfig: { placement: 'bottom-right' },
}}>
<div slot="content">
This is a dialog
<button
@click=${e => e.target.dispatchEvent(new Event('dialog-close', { bubbles: true }))}
>x</button>
<div>
<button slot="invoker">
Click me
</button>
</lion-dialog>
`;