🔹 Description
Menubar is a component wherein it dictates the title, information, functionality or actions that can be used in a specific widget or page.
🔹System Dependencies
🔹 Installation
The package can be installed via npm:
npm install empower-container --save
🔹 Menubar Basic Config (Icon)
Configuration
import { MenuBar } from 'empower-container';
..............
let [contentMenuBar, setContentMenuBar] = useState({
config: {
show: true,
icon: SVG_USER,
iconType: ['standard'],
showInfo: false,
title: 'Displays',
},
})
/**
*
* 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 Basic Config (Back Icon)
Configuration
import { MenuBar } from 'empower-container';
..............
let [contentMenuBar, setContentMenuBar] = useState({
config: {
show: true,
iconType: ['back'],
showInfo: false,
title: 'Displays',
},
})
/**
*
* 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 Basic Config (Checkbox)
Configuration
import { MenuBar } from 'empower-container';
..............
let [contentMenuBar, setContentMenuBar] = useState({
config: {
show: true,
iconType: ['check'],
showInfo: false,
title: 'Displays',
},
check: {
disabled: false,
selected: 0,
total: 5
}
})
/**
*
* 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 Basic Config (Checkbox With Selected)
Configuration
import { MenuBar } from 'empower-container';
..............
let [contentMenuBar, setContentMenuBar] = useState({
config: {
show: true,
iconType: ['check'],
showInfo: true,
title: 'Displays',
},
check: {
disabled: false,
selected: 2,
total: 5
}
})
/**
*
* 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 Basic Config (Checkbox With All Selected)
Configuration
import { MenuBar } from 'empower-container';
..............
let [contentMenuBar, setContentMenuBar] = useState({
config: {
show: true,
iconType: ['check'],
showInfo: true,
title: 'Displays',
},
check: {
disabled: false,
selected: 5,
total: 5
}
})
/**
*
* 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 Basic Config with Info
Configuration
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..."
})
/**
*
* 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 Button
Configuration
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....",
button: {
show: true,
actions: [{
class: 'button',
label: "Submit",
action: "readytosubmit", // 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 Footer Button
Configuration
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....",
buttonFooter: {
show: true,
actions: [{
class: 'button',
label: "Submit",
action: "footer-submit", // string optional
icon: SVG_SUBMIT,
show: true
}]
}
})
/**
*
* 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 Dropdown (Monthly Calendar)
Configuration
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....",
dropdown: {
show: true,
title: 'File Test',
type: 'date-picker-monthly',
selection: {
startDate: "Feb 2021",
endDate: "Feb 2021",
},
}
})
/**
*
* 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 Pagination
Configuration
import { NavTab } from 'empower-display';
..............
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>
</>
)
🔹  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. class = String label = String action = String icon = SVG show = Boolean |
🔹 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