Dialog: Use Cases
lion-dialog is a component wrapping a modal dialog controller.
Its purpose is to make it easy to use our Overlay System declaratively.
<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
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:
{
viewportConfig: {
placement: ... // <-- choose a position
}
}
Other overrides
No backdrop, hides on escape, prevents scrolling while opened, and focuses the body when hiding.
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:
{
hasBackdrop: false,
hidesOnEscape: true,
preventsScroll: true,
elementToFocusAfterHide: document.body
}