110 lines
2.6 KiB
Markdown
110 lines
2.6 KiB
Markdown
# Dialog >> Use Cases ||20
|
||
|
||
`lion-dialog` is a component wrapping a modal dialog controller.
|
||
Its purpose is to make it easy to use our Overlay System declaratively.
|
||
|
||
```js script
|
||
import { html } from '@mdjs/mdjs-preview';
|
||
import '@lion/ui/define/lion-dialog.js';
|
||
|
||
import { demoStyle } from './src/demoStyle.js';
|
||
import './src/styled-dialog-content.js';
|
||
import './src/slots-dialog-content.js';
|
||
```
|
||
|
||
```html
|
||
<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>
|
||
```
|
||
|
||
## Placement overrides
|
||
|
||
```js preview-story
|
||
export const placementOverrides = () => {
|
||
const dialog = placement => {
|
||
const cfg = { viewportConfig: { placement } };
|
||
return html`
|
||
<lion-dialog .config="${cfg}">
|
||
<button slot="invoker">Dialog ${placement}</button>
|
||
<div slot="content" class="dialog demo-box">
|
||
Hello! You can close this notification here:
|
||
<button
|
||
class="close-button"
|
||
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
|
||
>
|
||
⨯
|
||
</button>
|
||
</div>
|
||
</lion-dialog>
|
||
`;
|
||
};
|
||
return html`
|
||
<style>
|
||
${demoStyle}
|
||
</style>
|
||
<div class="demo-box_placements">
|
||
${dialog('center')} ${dialog('top-left')} ${dialog('top-right')} ${dialog('bottom-left')}
|
||
${dialog('bottom-right')}
|
||
</div>
|
||
`;
|
||
};
|
||
```
|
||
|
||
Configuration passed to `config` property:
|
||
|
||
```js
|
||
{
|
||
viewportConfig: {
|
||
placement: ... // <-- choose a position
|
||
}
|
||
}
|
||
```
|
||
|
||
## Other overrides
|
||
|
||
No backdrop, hides on escape, prevents scrolling while opened, and focuses the body when hiding.
|
||
|
||
```js preview-story
|
||
export const otherOverrides = () => {
|
||
const cfg = {
|
||
hasBackdrop: false,
|
||
hidesOnEscape: true,
|
||
preventsScroll: true,
|
||
elementToFocusAfterHide: document.body,
|
||
};
|
||
|
||
return html`
|
||
<style>
|
||
${demoStyle}
|
||
</style>
|
||
<lion-dialog .config="${cfg}">
|
||
<button slot="invoker">Click me to open dialog</button>
|
||
<div slot="content" class="demo-dialog-content">
|
||
Hello! You can close this dialog here:
|
||
<button
|
||
class="demo-dialog-content__close-button"
|
||
@click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
|
||
>
|
||
⨯
|
||
</button>
|
||
</div>
|
||
</lion-dialog>
|
||
`;
|
||
};
|
||
```
|
||
|
||
Configuration passed to `config` property:
|
||
|
||
```js
|
||
{
|
||
hasBackdrop: false,
|
||
hidesOnEscape: true,
|
||
preventsScroll: true,
|
||
elementToFocusAfterHide: document.body
|
||
}
|
||
```
|