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();