Version: 5.0.3

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 open property 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.

This is the header on 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.

Open a modal

<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)

This is the header on the modal

Open a modal

<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.

This is the header on the modal

Open a modal

<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.

No background overlay modal

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.

Open a modal

<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`
`fit-content`	If true the modal window will use the minimal space required to render the content. false the modal will use the value from width and height	`boolean`	`true`
`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`	`30rem`
`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`	`40rem`
`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	-

Methods

Function	Description	Params	Extra
~~`triggerClose`~~	~~Use the property open to trigger the Close button. Trigger click on close-button~~	`() => Promise<void>`	deprecated
~~`triggerOk`~~	~~Use the property open to trigger the OK button. Trigger click on ok-button~~	`() => Promise<void>`	deprecated

Slots

Main

Takes any dom element and render it inside the modal

<triton-modal>
  <div></div>
</triton-modal>

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>

Any element, but recommended typical header elements.

<triton-modal>
  <div slot="header"></div>
</triton-modal>

Modal

Basic Usage

Angular

Behavior

Open On Click

Appearance

Custom Height/Width

Button Properties

Background

Playground

API

Properties

Events

Methods

Slots

Main

footer

header

Details

Depends on

Modal

Basic Usage​

Angular​

Behavior​

Open On Click​

Appearance​

Custom Height/Width​

Button Properties​

Background​

Playground​

API​

Properties​

Events​

Methods​

Slots​

Main​

footer​

header​

Details​

Depends on​

Basic Usage

Angular

Behavior

Open On Click

Appearance

Custom Height/Width

Button Properties

Background

Playground

API

Properties

Events

Methods

Slots

Main

footer

header

Details

Depends on