Modal
Modals are popup windows that display over other content in the UI. They are often opened by clicking a button, or by some other user action.
Being somewhat intrusive, modals are useful for focusing the user's attention on a specific choice, or on some information displayed in the modal.
A common example of use is when asking the user "Are you sure you want to continue?" The TritonModal ships with two configurable default buttons,
the [OK] and the [Close] button.
Basic Usage
<triton-modal></triton-modal>
<TritonModal></TritonModal>
<html>
<head>
<script type="module">
import { defineCustomElements } from '~node_modules/@kognifai/triton-cl-core/loader/index.es2017.js';
defineCustomElements();
</script>
</head>
<body>
<triton-modal></triton-modal>
</body>
</html>
Angular
Use two-way binding for the
openproperty in your angular application with[(open)]="variable"
Behavior
Open On Click
By setting the open property on the modal, you can trigger the modal to open when the user clicks a button.
Note that the header slot is used to set the header of the modal.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic error itaque, nihil blanditiis autem nostrum laboriosam eum, id suscipit eveniet placeat dolorem! Omnis dolor, laborum voluptatem minus labore vero eveniet officiis vel perspiciatis, eius dicta. Enim, natus delectus explicabo architecto odio porro officia unde debitis earum fuga perferendis ex dolores cum alias tempora, ratione labore nostrum repellendus recusandae dolor placeat iure consequatur commodi. Dolorem itaque doloribus soluta minus architecto quisquam, cum assumenda quia totam ducimus delectus dolore molestias neque, cupiditate iusto ratione in eligendi voluptate quas beatae. Maiores sed similique, necessitatibus sint eveniet vitae nam amet iusto minima illo itaque.
<triton-modal open="false">
<header slot="header">This is the header on the modal</header>
<p>Lorem ipsum...</p>
</triton-modal>
<triton-button onClick="() => (open = true)">Open a modal</triton-button>
Appearance
Custom Height/Width
Triton-Modal can recive a custom height and/or width.
If a number is passed, the width will be set in px. You can also pass a CSS string,
the width property in CSS will be given as the string specifies (note that only valid CSS can be passed)
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic error itaque, nihil blanditiis autem nostrum laboriosam eum, id suscipit eveniet placeat dolorem! Omnis dolor, laborum voluptatem minus labore vero eveniet officiis vel perspiciatis, eius dicta. Enim, natus delectus explicabo architecto odio porro officia unde debitis earum fuga perferendis ex dolores cum alias tempora, ratione labore nostrum repellendus recusandae dolor placeat iure consequatur commodi.
<triton-modal height="80vh" width="300">
<header slot="header">This is the header on the modal</header>
<p>Lorem ipsum...</p>
</triton-modal>
Button Properties
The modal also has two buttons, which can be configured using the modal properties. Both buttons dismiss the modal when clicked.
The Ok-button is used for confirmation, clicking it signifies that the user continues, agrees or accepts.
The close-button will close the modal and revert any changes the user might have made while it was open.
These buttons can be customized further with the properties ok-text, ok-disabled, ok-skin and so on.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic error itaque, nihil blanditiis autem nostrum laboriosam eum, id suscipit eveniet placeat dolorem! Omnis dolor, laborum voluptatem minus labore vero eveniet officiis vel perspiciatis, eius dicta. Enim, natus delectus explicabo architecto odio porro officia unde debitis earum fuga perferendis ex dolores cum alias tempora, ratione labore nostrum repellendus recusandae dolor placeat iure consequatur commodi.
<triton-modal ok-text="Custom Ok text" close-text="Custom Close text">
<header slot="header">This is the header on the modal</header>
<p>Lorem ipsum...</p>
</triton-modal>
Background
Modals display with a blurred background by default, however this can be configured using the overlay property.
The background should be quite visible in this case, despite the fact that a modal is open. This has been achived by use of the elegant overlay property.
<triton-modal overlay="false">
<header slot="header">No background overlay modal</header>
<p>The background should...</p>
</triton-modal>
Playground
API
Properties
| Property | Description | Type | Default |
|---|---|---|---|
close-button | If true outlined button will show in the footer | boolean | true |
close-disabled | If true the close-button will be disabled for user interaction,thus preventing the user from canceling the modal | boolean | false |
close-icon | An icon that is rendered on the close-button | Icon | - |
close-skin | The skin of the close-button | alarm critical flat information neutral primary secondary success warning | 'secondary' |
close-text | The text to display on the close-button that cancels the modal | string | 'Cancel' |
exit-button | If true a button with X to close the modal will show in the header on the right side | boolean | false |
gap | The general spacing between modal specific items in the modal | base body large medium small tiny xlarge xxlarge xxxlarge | 'base' |
height | If a number is passed, the height will be set in px.You can also pass a CSS string, the height property in CSS will be givenas the string specifies note that only valid CSS can be passed | number string | - |
title | The title which renders at the top of the modal | string | - |
ok-button | If true success button will show in the footer | boolean | true |
ok-disabled | If true the ok-button will be disabled for user interaction,thus preventing the user from confirming the modal | boolean | false |
ok-icon | The icon which will be displayed on the ok-button which confirms the modal | Icon | - |
ok-skin | The skin of the ok-button | alarm critical flat information neutral primary secondary success warning | 'primary' |
ok-text | The text which displays on the ok-button | string | 'OK' |
open | If true the modal is open, and visible on screenSetting this to false will trigger the close eventClicking this button will return the modal to the state it was in, before it was opened | boolean | false |
overlay | To show the background overlay or not | boolean | true |
overlay-closable | To allow a click event on the overlay to disableclose the modal | boolean | true |
width | If a number is passed, the width will be set in px.You can also pass a CSS string, the width property in CSS will be givenas the string specifies note that only valid CSS can be passed | number string | - |
z-index | The CSS z-index at which the modal renders | number | 1000 |
Events
| Name | Type | Description | Extra |
|---|---|---|---|
| afterClose | CustomEvent<void> | Emitted after modal has closed | - |
| afterOpen | CustomEvent<void> | Emitted after modal has opened | - |
| atChange | CustomEvent<boolean> | Emit the state of the open prop, on change | - |
| atClose | CustomEvent<MouseEvent> | Emitted when close btn is clicked | - |
| atOk | CustomEvent<MouseEvent> | Emitted when OK btn is clicked | - |
| atClick | CustomEvent<void> | The default click behavior of the button | - |
Methods
| Function | Returns | Description | Extra |
|---|---|---|---|
triggerClose() | Promise<void> | ||
triggerOk() | Promise<void> |
Slots
Main
Takes any dom element and render it inside the modal
<triton-modal>
<div></div>
</triton-modal>
footer
Items will be placed alongside the [OK] and/or [Close] button. Any element is acceptable, but recommended to only use triton buttons
<triton-modal>
<div slot="footer"></div>
</triton-modal>
header
Any element, but recommended typical header elements.
<triton-modal>
<div slot="header"></div>
</triton-modal>