Skip to main content
Version: 1.21.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 displayedIf content is unspecified, the value of text will be displayed
In other cases, the text will be ignored
typestring"danger"Background colorAvailable options:
"danger" : Red (#e74c3c)
"info" : Blue (#3498db)
"success" : Green (#91c36c)
content *1string/HTMLElement""The DOM to be displayedIf a string with HTML is set, it will be automatically converted to HTML and displayed as it is
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
caution

*1: [Security] Kintone UI Component does NOT sanitize this property value. It is the developer's responsibility to escape any user input when using this option so that XSS attacks would be prevented.

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

Constructor​

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

Parameter​

NameTypeDefaultDescriptionRemark
optionsobject{}Object that includes component properties

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!',
  content:
    'Error occurred!<br>Please click the <a href="#">Link</a> for details.',
  type: 'danger',
  className: 'options-class',
  duration: 2000,
  container: document.body
});

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

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