🔹 Description
Alert is a component that notify, informs, or warns the user if there are any notification, issues or disclaimers on the feature, page, or widget.To follow
...
🔹System Dependencies
🔹 Installation
The package can be installed via npm:
| Code Block |
|---|
npm install empower-display --save |
🔹 Standard Alert
...
Configuration
| Code Block |
|---|
import { Alert } from 'empower-display';
..............
const configAlert = {
show: true,
actionable: true,
status: "success", // "success", "info", "critical", "warning"
title: "Sample Title",
message: ["Sample Sub Text Here"],
label: 'Sample Message',
actions: [
{
label: 'Submit',
clicked: (event) => getActions(event, 'submit'),
isDisabled: false
},
{
label: 'Cancel',
clicked: (event) => getActions(event, 'cancel-alert'),
isDisabled: false
}
]
}
/**
*
* getActions - method that gets the value and data of the component
*/
const getActions = (value, data) => {
console.log('VALUE', value, data)
}
..............
return (
<>
<Alert config={configAlert} />
</>
) |
🔹 Alert with Batch Text
...
Configuration
| Code Block |
|---|
import { Alert } from 'empower-display';
..............
const configAlert = {
show: true,
actionable: true,
status: "warning", // "success", "info", "critical", "warning"
title: "Sample Title",
message: [
{
title: "Sample warning message",
message: [
"Sample message 1", "Sample Message 2"
]
},
{
title: "Sample warning message 2",
message: [
"Sample message 3", "Sample Message 4", "Sample Message 5"
]
}
],
label: 'Sample Message',
batch: 5, //limit before see more
actions: [
{
"label": "Submit",
"isDisabled": false
},
{
"label": "Cancel",
"isDisabled": false
}
]
}
/**
*
* getActions - method that gets the value and data of the component
*/
const getActions = (value, data) => {
console.log('VALUE', value, data)
}
..............
return (
<>
<Alert config={configAlert} />
</>
) |
🔹 Alert with Drop down
...
Configuration
| Code Block |
|---|
import { Alert } from 'empower-display';
..............
const configAlertDropdown = {
show: true,
actionable: true,
status: "success",
title: "Sample Alert Title",
message: ["Sample Message Here"],
buttons: [
{
label: 'Start Editing',
icon: <img src="https://storage.googleapis.com/empower-production-assets/images/icons/icon-arrowdown-white.svg" />,
iconPlacement: 'right', // left, right
class: '', // this is optional
withDropDown: true,
actions: [
{
label: 'As Public Template',
action: 'as_public',
isDisabled: true,
tooltip: {
delay: 400, // default 400
direction: 'right',//top, right, bottom, left
content: 'This is the content for tooltop'
}
},
{
label: 'As Assigned Template',
action: 'as_assigned',
isDisabled: false,
tooltip: {
delay: 400, // default 400
direction: 'right',//top, right, bottom, left
content: 'This is the content for tooltop'
}
}
]
},
{
label: 'Choose Another Template',
icon: <img src="https://storage.googleapis.com/empower-production-assets/images/icons/icon-attach-green.svg" />,
iconPlacement: 'right', // left, right
class: 'outline', // this is optional
withDropDown: false, //set to "true" if you want to add dropdown and replace "action" with array "actions"
action: 'another_template'
}
]
}
/**
*
* getActions - method that gets the value and data of the component
*/
const getActions = (value, data) => {
console.log('VALUE', value, data)
}
..............
return (
<>
<Alert config={{ ...configAlertDropdown }} onChange={(action, data) => getActions(action, data)} />
</>
) |
🔹 Properties
Parameter | Data Type | Constraint | Description |
|---|---|---|---|
show | Boolean | Required | Sets the visibility of the component. |
| Boolean | Required | Set true is the alert needs button for actions. |
status | String | Required | Sets the border color or use of the alert component. Values are: warning = yellow color success = green color info = blue color error = red color |
title | String | Required | Main title of the alert |
message | Array | Required | Standard sub text. Can be an array of string that will result as a unordered list or an array of object with properties of title (string) and message (array) that will result to an unordered list with subtext. |
label | String | Required | Italicized subtext |
batch | Int | Optional | Number of items or message before displaying See More text |
actions | Array | Optional | Buttons on the alert components |
iconPlacement | String | Optional | Icon placement of the buttons |
class | String | Optional | Custom class for the alert component |
withDropdown | Boolean | Optional | Set true if the button has dropdown |
buttons | Array | Optional | Buttons on the alert components with the capability to Dropdown. |
🔹 References
Repository Link: https://gitlab.com/empowerteams/empower-display.git
...