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.
<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.
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-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)
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-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.
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-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.
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.
<triton-window overlay="false">
<header slot="header">No background overlay window</header>
<p>The background should...</p>
</triton-window>
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' |
fit-to-screen | if false the window can be plased outside the visible window | 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 | - |
is-collapsed | collapse needs to be true for this property to work | boolean | false |
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 window is open, and visible on screenSetting this to false will trigger the close event | boolean | false |
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 | - |
title | The title which renders at the top of the modal | string | - |
z-index | The CSS z-index at which the modal renders | number | 1000 |
Events
Name | Type | Description | Extra |
---|---|---|---|
afterClose | CustomEvent<void> | Emitted after window has closed | - |
afterOpen | CustomEvent<void> | Emitted after window has opened | - |
atChange | CustomEvent<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>
footer
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>
header
Any element. We recommend using typical header elements.
<triton-window>
<div slot="header"></div>
</triton-window>