🔹 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.
🔹System Dependencies
🔹 Installation
The package can be installed via npm:
npm install empower-display --save
🔹 Standard Alert
Configuration
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
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
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
NPM Package: https://www.npmjs.com/package/empower-display
Demo Repo: git@bitbucket.org:empowerteams/mfe-sub-application-template.git