Menu Bar

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

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

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 (class = String, label = String, action = String, icon = SVG, show = Boolean)
button	Object	Optional	Display set of buttons in the upper left part of the menubar. show = Boolean actions = Array (class = String, label = String, action = String, icon = SVG, show = Boolean)
search	Object	Optional	Display search bar field. show = Boolean value = String
pivot	Object	Optional	Display a dropdown at the upper right of the menubar. show = Boolean selected = String actions = Array (label = String, value = String)
check	Object	Optional	It handles the selected and the total value that will response on the display for the main checkbox at the menubar. disabled = Boolean selected = Number total = Number Note: check* property will not use if the there’s no check value iconType inside the config property.
mainButton	Object	Optional	Display the main button and display a dropdown if its multiple. show = Boolean label = String icon = SVG actions = Array (label = String, Icon = SVG, action = String)

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