45 lines
981 B
Markdown
45 lines
981 B
Markdown
# Dialog
|
|
|
|
[//]: # 'AUTO INSERT HEADER PREPUBLISH'
|
|
|
|
`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 `.config` object to set or update the OverlayController's configuration
|
|
|
|
## How to use
|
|
|
|
### Installation
|
|
|
|
```sh
|
|
npm i --save @lion/dialog
|
|
```
|
|
|
|
```js
|
|
import '@lion/dialog/lion-dialog.js';
|
|
```
|
|
|
|
### Example
|
|
|
|
```js
|
|
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>
|
|
`;
|
|
```
|