...
Configuration
| Code Block |
|---|
import { NavTabMenuBar } from 'empower-displaycontainer';
..............
let [contentMenuBar, setContentMenuBar] = useState({
config: {
show: true,
icon: SVG_USER,
iconType: ['standard'],
showInfo: true,
title: 'Displays',
},
info: "Sample information here....",
pagination: {
show: true,
hideSummary: false,
counter: 10,
perPage: 10,
page: 1,
total: 35,
}
})
/**
*
* getActions - method that gets the value and data of the component
*/
const getActions = (value, data) => {
console.log('VALUE', value, data)
}
..............
return (
<>
<MenuBar { ...contentMenuBar } getActions={(action, data) => getContentMenuBarActions(action, data)}>
.......Children here
</MenuBar>
</>
) |
🔹
...
Parameter
...
Data Type
...
Constraint
...
Description
...
config
...
Object
...
Required
...
Display the basic config including icon, title and info.
show = Boolean
icon = SVG
iconType = Array (standard, check, back and close)
showInfo = Boolean
title = String
...
info
...
String
...
Optional
...
Display value of the popup information.
...
pagination
...
Object
...
Optional
Display the pagination feature in the right side of the menubar.
show = Boolean
hideSummary = Boolean
counter = Number
perPage = Number
page = Number
total = Number
...
buttonFooter
...
Object
...
Optional
Display set of buttons to the bottom of the menubar.
show = Boolean
actions = Array
...
Menubar with Main Button
...
Configuration
| Code Block |
|---|
import { MenuBar } from 'empower-container';
..............
let [contentMenuBar, setContentMenuBar] = useState({
config: {
show: true,
icon: SVG_USER,
iconType: ['standard'],
showInfo: true,
title: 'Displays',
},
info: "Sample information here....",
mainButton: {
show: true,
label: 'File a Request',
icon: SVG_ADD,
actions: [
{
label: "File Leave",
action: "leave", // string optional
icon: SVG_SUBMIT
},
{
label: "File Overtime",
action: "overtime", // string optional
icon: SVG_SUBMIT
},
{
label: "File Toil",
action: "toil", // string optional
icon: SVG_SUBMIT
},
{
label: "File Amendment",
action: "amendment", // string optional
icon: SVG_SUBMIT
}
]
}
})
/**
*
* getActions - method that gets the value and data of the component
*/
const getActions = (value, data) => {
console.log('VALUE', value, data)
}
..............
return (
<>
<MenuBar { ...contentMenuBar } getActions={(action, data) => getContentMenuBarActions(action, data)}>
.......Children here
</MenuBar>
</>
) |
🔹 Menubar with Pivot
...
Configuration
| Code Block |
|---|
import { MenuBar } from 'empower-container';
..............
let [contentMenuBar, setContentMenuBar] = useState({
config: {
show: true,
icon: SVG_USER,
iconType: ['standard'],
showInfo: true,
title: 'Displays',
},
info: "Sample information here....",
pivot: {
show: true,
selected: 'all',
actions: [
{
label: "All",
value: "all", // string optional
},
{
label: "Pending",
value: "pending", // string optional
},
{
label: "Approved",
value: "approved", // string optional
},
{
label: "Rejected",
value: "rejected", // string optional
},
{
label: "Cancelled",
value: "cancelled", // string optional
},
]
}
})
/**
*
* getActions - method that gets the value and data of the component
*/
const getActions = (value, data) => {
console.log('VALUE', value, data)
}
..............
return (
<>
<MenuBar { ...contentMenuBar } getActions={(action, data) => getContentMenuBarActions(action, data)}>
.......Children here
</MenuBar>
</>
) |
🔹 Menubar with Search
...
Configuration
| Code Block |
|---|
import { MenuBar } from 'empower-container';
..............
let [contentMenuBar, setContentMenuBar] = useState({
config: {
show: true,
icon: SVG_USER,
iconType: ['standard'],
showInfo: true,
title: 'Displays',
},
info: "Sample information here....",
search: {
show: true,
value: ''
}
})
/**
*
* getActions - method that gets the value and data of the component
*/
const getActions = (value, data) => {
console.log('VALUE', value, data)
}
..............
return (
<>
<MenuBar { ...contentMenuBar } getActions={(action, data) => getContentMenuBarActions(action, data)}>
.......Children here
</MenuBar>
</>
) |
🔹 Properties
Parameter | Data Type | Constraint | Description |
|---|---|---|---|
config | Object | Required | Display the basic config including icon, title and info. |
info | String | Optional | Display value of the popup information. |
pagination | Object | Optional | Display the pagination feature in the right side of the menubar. |
buttonFooter | Object | Optional | Display set of buttons to the bottom of the menubar. |
button | Object | Optional | Display set of buttons in the upper left part of the menubar. |
search | Object | Optional | Display search bar field. |
pivot | Object | Optional | Display a dropdown at the upper right of the menubar. |
check | Object | Optional | It handles the selected and the total value that will response on the display for the main checkbox at the menubar. |
mainButton | Object | Optional | Display the main button and display a dropdown if its multiple. |
🔹 References
Repository Link: https://gitlab.com/empowerteams/empower-displaycontainer.git
NPM Package: https://www.npmjs.com/package/empower-displaycontainer
Demo Repo: git@bitbucket.org:empowerteams/mfe-sub-application-template.git
...