Version: 3.1.0

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

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

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

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'`
`collapse`		`boolean`	`false`
`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	-
atClick	`CustomEvent<void>`	The default click behavior of the button	-

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>

Window

Basic Usage

Behavior

Angular Two-Way Bindings

Fit to screen

Open On Click

Appearance

Custom Height/Width

Button Properties

Background

Playground

API

Properties

Events

Slots

Main

footer

header

Details

Depends on

Window

Basic Usage​

Behavior​

Angular Two-Way Bindings​

Fit to screen​

Open On Click​

Appearance​

Custom Height/Width​

Button Properties​

Background​

Playground​

API​

Properties​

Events​

Slots​

Main​

footer​

header​

Details​

Depends on​

Basic Usage

Behavior

Angular Two-Way Bindings

Fit to screen

Open On Click

Appearance

Custom Height/Width

Button Properties

Background

Playground

API

Properties

Events

Slots

Main

footer

header

Details

Depends on