Version: 2.0.0

Notification

Notifications are used to notify users of an event or communicate changes as a result of user actions. For instance if an error needs to be displayed to the user, a notification could be used, or one could use notifications to tell the user that their form was submitted sucessfully. Notifications often serve to provide user feedback.

Basic Usage

<triton-notification>
  Notification text
</triton-notification>

<TritonNotification>
  Notification text
</TritonNotification>

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

Notification text

Behavior

Timeout

The component emits a void-type event with name atClose after a specified timeout provided in milliseconds. The same event is triggered when the user attempts to manually dismiss the notification.

Fire Notification

<triton-notification timeout="5000">
  This notification will time out soon!
</triton-notification>

Appearance

Custom Icon

Pass a valid TritonIcon name to the custom-icon property to set a custom icon in the notification.

This notification has a custom icon!

<triton-notification customIcon="map"> 
  This notification has a custom icon!
</triton-notification>

Skin

Use the skin property to set an appropriate skin for the type of noticiation. Certain skins have variants for both day and dusk theme.

Hello, neutral skin

Hello, information skin

Hello, success skin

Hello, flat skin. We don't even have shadows here.

Hello, warning skin

Hello, alarm skin

Hello, critical skin

<triton-notification skin="neutral">Hello, neutral skin</triton-notification>
...

Playground

I will time out and emit an event

API

Properties

Property	Description	Type	Default
`custom-icon`	^{Override icon in notification with icon string}	`Icon`	-
`fluid`	^{If true, the element fills all available width}	`boolean`	`false`
`show-close`	^{If true, the element fills all available width}	`boolean`	`true`
`size`	^{Set the size of the component}	`base` `body` `large` `medium` `small` `tiny` `xlarge` `xxlarge` `xxxlarge`	`defaultOptions.baseSize`
`skin`	^{Set the skin of the component from preset optionsThe skin determines how the component looks}	`alarm` `critical` `flat` `information` `neutral` `primary` `secondary` `success` `warning`	`'primary'`
`timeout`	^{Milliseconds to self-close. Emits atClose event on timeout.}	`number`	`-1`

Events

Name	Type	Description	Extra
atClose	`CustomEvent<void>`	Dispatched void-type event when notificationis closed manually or times out	-

Slots

This slot can take any markup element.

<triton-notification>
  <div slot="This slot can take any markup element."></div>
</triton-notification>

Details

Depends on

TritonIcon

Notification

Basic Usage​

Behavior​

Timeout​

Appearance​

Custom Icon​

Skin​

Playground​

API​

Properties​

Events​

Slots​

This slot can take any markup element.​

Details​

Depends on​