Page Comparison

...

Configuration

Code Block

import { NavTabMenuBar } from 'empower-displaycontainer';

..............

  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>
    </>
  )

...

Configuration

Code Block

import { NavTabMenuBar } from 'empower-displaycontainer';

..............

  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>
    </>
  )

...

Configuration

Code Block

import { NavTabMenuBar } from 'empower-displaycontainer';

..............

  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>
    </>
  )

...

Configuration

Code Block

import { NavTabMenuBar } from 'empower-displaycontainer';

..............

  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>
    </>
  )

...

Configuration

Code Block

import { NavTabMenuBar } from 'empower-displaycontainer';

..............

  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>
    </>
  )

...

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..."
    })
    
    /**
     * 
     * 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>
    </>
  )

...

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....",
        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>
    </>
  )

...

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....",
        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

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....",
        paginationdropdown: {
            show: true,
            hideSummarytitle: false'File Test',
            countertype: 10'date-picker-monthly',
            perPageselection: 10,{
            page: 1,   startDate: "Feb 2021",
        total: 35        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

Code Block

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....",
        dropdownpagination: {
            show: true,
            titlehideSummary: 'File Test'false,
            typecounter: 'date-picker-monthly'10,
            selectionperPage: {10,
            page: 1,
   startDate: "Feb 2021",                 endDate: "Feb 2021",
            }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>
    </>
  )

🔹

...

Configuration

Code Block

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

...

activities

...

Array

...

Required

...

Properties

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

🔹 References

Repository Link: https://gitlab.com/empowerteams/empower-display.git

...

Versions Compared

Old Version 1

New Version 2

Key

🔹 Menubar with

Dropdown (Monthly Calendar)

🔹 Menubar with

Pagination

🔹

🔹 Properties

Properties

🔹 References