Dialog

Table of Contents

Basic Usage

Create dialogs using the k-dialog component. Open the dialog by calling the open() method, and close it by calling the close() method. Or it can be closed using the dialog's GUI (clicking the overlay, clicking the close button, or the cancel or confirm action buttons).

<k-dialog id="d1">
<p class="p">Hello World</p>
</k-dialog>
<button onclick="doument.getElementById('d1').open()">Open Dialog</button>

Hello World

Titles

Assign an element to the title slot to have it appear as the dialog title.

<k-dialog id="d2">
<h6
class="m0 px"
slot="title"
>
This is a fact</h6>
<p class="p">A hotdog is a sandwhich</p>
</k-dialog>
This is a fact

A hotdog is a sandwhich

Action Buttons

Add a cancel button using the cancel-text attribute.

<k-dialog
id="d4"
cancel-text="Absolutly Not"
>

<p class="p">Mint and Chocolate belong together</p>
</k-dialog>

Mint and Chocolate belong together

Add a confirm button using the confirm-text attribute.

<k-dialog
id="d5"
confirm-text="Confirm"
>

<p class="p">Spaghetti is the greatest food</p>
</k-dialog>

Spaghetti is the greatest food

Try it with both a cancel and confirm button.

<k-dialog
id="d6"
cancel-text="It should be outlawed"
confirm-text="Of course it is"
>

<p class="p">Ranch is gross</p>
</k-dialog>

Ranch is gross

JavaScript Usage

Create Dialog
<button id="d7">Open Dialog</button>
<script type="module">
import Dialog from '/kempo/components/Dialog.js';
document.getElementById('d7').addEventListener('click', () => {
Dialog.create('<p>Hello World</p>');
});
</script>
Error Dialog
<button id="d8">Open Dialog</button>
<script type="module">
import Dialog from '/kempo/components/Dialog.js';
document.getElementById('d8').addEventListener('click', () => {
Dialog.error("<p>Oh no, don't do that!</p>");
});
</script>

Confirm Dialog

Use the Dialog.confirm static method to create a confirmation dialog. This method takes a text message, a response callback, and an options object.

<button id="d9">Open Confirm Dialog</button>
<script type="module">
import Dialog from '/kempo/components/Dialog.js';
document.getElementById('d9').addEventListener('click', () => {
Dialog.confirm("Are you sure you want to proceed?", response => {
console.log("User response:", response);
});
});
</script>

JavaScript Reference

Constructor

Extends Component
new Dialog(options)

Parameters

options: object

An object containing the initial configuration for the dialog. The options object can contain the following properties:

Requirements

Attributes

opened: boolean

Whether the dialog is opened.

closeBtn: boolean

Whether to show the close button.

overlayClose: boolean

Whether clicking the overlay closes the dialog.

confirmText: string

Text for the confirm button.

confirmClasses: string

Classes for the confirm button.

cancelText: string

Text for the cancel button.

cancelClasses: string

Classes for the cancel button.

Properties

confirmAction: function

Action to perform on confirm.

cancelAction: function

Action to perform on cancel.

closeCallback: function

Callback to execute when the dialog is closed.

Methods

open(): void

Opens the dialog.

close(): void

Closes the dialog.

toggle(): void

Toggles the dialog open or closed.

focus(): void

Focuses the first focusable element in the dialog.

blur(): void

Returns focus to the element that had focus before the dialog was opened.

Static Methods

create(contents, options): Dialog

Creates and opens a new dialog with the specified contents and options.

Options
confirm(text, responseCallback, options): void

Creates and opens a confirmation dialog with the specified text and options.

Options
error(text, responseCallback, options): void

Creates and opens an error dialog with the specified text and options.

Options