Dialog
Table of Contents
Examples
Basic UsageTitles
Action Buttons
JavaScript Usage
JavaScript Reference
ConstructorRequirements
Attributes
Properties
Methods
Static Methods
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:
opened
: boolean - Whether the dialog is initially 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.confirmAction
: function - Action to perform on confirm.cancelText
: string - Text for the cancel button.cancelClasses
: string - Classes for the cancel button.cancelAction
: function - Action to perform on cancel.closeCallback
: function - Callback to execute when the dialog is closed.
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
opened
: boolean - Whether the dialog is initially 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.confirmAction
: function - Action to perform on confirm.cancelText
: string - Text for the cancel button.cancelClasses
: string - Classes for the cancel button.cancelAction
: function - Action to perform on cancel.closeCallback
: function - Callback to execute when the dialog is closed.
confirm(text, responseCallback, options): void
Creates and opens a confirmation dialog with the specified text and options.
Options
title
: string - The title of 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.closeBtn
: boolean - Whether to show the close button.overlayClose
: boolean - Whether clicking the overlay closes the dialog.
error(text, responseCallback, options): void
Creates and opens an error dialog with the specified text and options.
Options
title
: string - The title of the dialog.cancelText
: string - Text for the cancel button.cancelClasses
: string - Classes for the cancel button.closeBtn
: boolean - Whether to show the close button.overlayClose
: boolean - Whether clicking the overlay closes the dialog.