Skip to main content
5.0.3Next5.1.05.0.35.0.25.0.15.0.04.0.94.0.84.0.73.2.03.1.03.0.13.0.02.1.12.0.101.0.0
Version: 5.0.3

Window

Windows display content over other parts of the UI. They are often opened by clicking a button, or by some other user action. Windows can be moved by dragging them around the screen. They can also be opened or minimized like an acordian. The window component can be used to show a selection of options that the user will be toggling and moving around on screen, simultaneously with using the app, like a tools pannel.

Basic Usage

<triton-window></triton-window>
<TritonWindow></TritonWindow>
<html> 
<head>
<script type="module">
import { defineCustomElements } from '~node_modules/@kognifai/triton-cl-core/loader/index.es2017.js';
defineCustomElements();
</script>
</head>
<body>
<triton-window></triton-window>
</body>
</html>

Behavior

Angular Two-Way Bindings

Use two-way binding for the open property in your angular application with [(open)]="variable"

Fit to screen

By setting the fitToScreen property, the Triton Window will stay inside the screen viewport, even when the viewport shrinks to hide it, or when it gets dragged off screen.

WindowFOOTER
<triton-window open="false">  
<header slot="header">This is the header on the window</header>
<p>Lorem ipsum...</p>
</triton-window>
<triton-button onClick="() => (open = true)">Open a window</triton-button>

Open On Click

By setting the open property on the window, you can trigger the window to open when the user clicks a button. Note that the header slot is used to set the header of the window.

This is the header on the window

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 window
<triton-window open="false">  
<header slot="header">This is the header on the window</header>
<p>Lorem ipsum...</p>
</triton-window>
<triton-button onClick="() => (open = true)">Open a window</triton-button>

Appearance

Custom Height/Width

Triton-Window 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 window

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.

Open a window
<triton-window height="80vh" width="300">
<header slot="header">This is the header on the window</header>
<p>Lorem ipsum...</p>
</triton-window>

Button Properties

The window also has two buttons, which can be configured using the window properties. Both buttons dismiss the window 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 window 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 window

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.

Open a window
<triton-window ok-text="Custom Ok text" close-text="Custom Close text">
<header slot="header">This is the header on the window</header>
<p>Lorem ipsum...</p>
</triton-window>

Background

Windows display with a blurred background by default, however this can be configured using the overlay property.

No background overlay window

The background should be quite visible in this case, despite the fact that a window is open. This has been achived by use of the elegant overlay property.

Open a window
<triton-window overlay="false">
<header slot="header">No background overlay window</header>
<p>The background should...</p>
</triton-window>

Playground

API

Properties

PropertyDescriptionTypeDefault
close-buttonIf true outlined button will show in the footerbooleantrue
close-disabledIf true the close-button will be disabled for user interaction,thus preventing the user from canceling the modalbooleanfalse
close-iconAn icon that is rendered on the close-buttonIcon-
close-skinThe skin of the close-buttonalarm critical flat information neutral primary secondary success warning'secondary'
close-textThe text to display on the close-button that cancels the modalstring'Cancel'
fit-to-screenif false the window can be plased outside the visible windowbooleantrue
gapThe general spacing between modal specific items in the modalbase body large medium small tiny xlarge xxlarge xxxlarge'base'
heightIf 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 passednumber string-
is-collapsedcollapse needs to be true for this property to workbooleanfalse
ok-buttonIf true success button will show in the footerbooleantrue
ok-disabledIf true the ok-button will be disabled for user interaction,thus preventing the user from confirming the modalbooleanfalse
ok-iconThe icon which will be displayed on the ok-button which confirms the modalIcon-
ok-skinThe skin of the ok-buttonalarm critical flat information neutral primary secondary success warning'primary'
ok-textThe text which displays on the ok-buttonstring'OK'
openIf true the window is open, and visible on screenSetting this to false will trigger the close eventbooleanfalse
widthIf 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 passednumber string-
titleThe title which renders at the top of the modalstring-
z-indexThe CSS z-index at which the modal rendersnumber1000

Events

NameTypeDescriptionExtra
afterCloseCustomEvent<void>Emitted after window has closed-
afterOpenCustomEvent<void>Emitted after window has opened-
atChangeCustomEvent<boolean>Emit the state of the open prop, on change-

Slots

Main

Takes any dom element and render it inside the window

<triton-window>
<div></div>
</triton-window>

Items will be placed in the footer. Any element is acceptable, but we recommend using triton buttons

<triton-window>
<div slot="footer"></div>
</triton-window>

Any element. We recommend using typical header elements.

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

Details

Depends on