Skip to main content
Version: 1.18.0

Notification

Overview​

The Notification component allows the user to display pop-up notifications.

Specification​

Property​

Here is a list of properties that can be used for modifying the component:

NameTypeDefaultDescriptionRemark
classNamestring""Component class name
textstring""Text to be displayed
typestring"danger"Background colorAvailable options:
"danger" : Red (#e74c3c)
"info" : Blue (#3498db)
"success" : Green (#91c36c)
durationnumber-1Milliseconds to close componentUnit is milliseconds
You can specify 0 or a number larger than 0
If you specify invalid value (a number less than 0 or is not a number), component is opened and will not be closed automatically
containerHTMLElementdocument.bodyTarget element to append the componentBy default, it uses the body of the top-level document object, so it's simply document.body most of the time
Will result an error if the value of container is not an HTMLElement

Constructor​

Notification(options)
Here is a list of available constructors:

Parameter​

NameTypeDefaultDescriptionRemark
optionsobject{}Object that includes component properties

Event​

Here is a list of events that can be specified:

NameTypeDescriptionRemark
closefunctionEvent handler when the component has been closedIt will pass the event object as the argument

Method​

Here is a list of available methods:

open()​

Show the Notification

Parameter​

none

Return​

none

close()​

Hide the Notification

Parameter​

none

Return​

none

Custom CSS​

tip

Please check Custom CSS feature guide at first.

Here is a list of properties that can be used for modifying component style:

Property​

Name
--kuc-notification-font-size
--kuc-notification-color
--kuc-notification-background-color
--kuc-notification-close-button-background-color

Sample Code​

tip

Please check the package installation method first.

Here is a sample code when all parameters are specified:

const Kuc = Kucs['1.x.x'];

const notification = new Kuc.Notification({
  text: 'Error occurred!',
  type: 'danger',
  className: 'options-class',
  duration: 2000,
  container: document.body
});

notification.addEventListener('close', event => {
  console.log(event);
});

notification.open();
notification.close();
Last updated on