Menu Bar
- Regino Victorino (Unlicensed)
- Dio Danganan (Unlicensed)
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 --saveMenubar 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
Menubar Basic Config (Checkbox With Selected)
Configuration
Menubar Basic Config (Checkbox With All Selected)
Configuration
Menubar Basic Config with Info
Configuration
Menubar with Button
Configuration
Menubar with Footer Button
Configuration
Menubar with Dropdown (Monthly Calendar)
Configuration
Menubar with Pagination
Configuration
Menubar with Main Button
Configuration
Menubar with Pivot
Configuration
Menubar with Search
Configuration
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-container.git
NPM Package: https://www.npmjs.com/package/empower-container
Demo Repo: git@bitbucket.org:empowerteams/mfe-sub-application-template.git