Nav Tab

🔹 Description

Nav tab is a component that allows the user to switch tab.

🔹System Dependencies

🔹 Installation

The package can be installed via npm:

npm install empower-display --save

🔹 Nav Tab Base Configuration

Configuration

import { NavTab } from 'empower-display';

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

  let [configTab, setConfigTab] = useState({
        tabs: [
            { label: 'On Time', value: 'ON_TIME', status: 'ON_TIME' },
            { label: 'Tardy', value: 'TARDY', status: 'TARDY' },
            { label: 'On Leave', value: 'ON_LEAVE', status: null },
            { label: 'Not in Office', value: 'NOT_IN_OFFICE', status: '' }
        ],
        selected: 'ON_TIME'
    })
    
    /**
     * 
     * getActions - method that gets the value and data of the component
     */

    const getActions = (value, data) => {
        console.log('VALUE', value, data)
    }
    
..............

  return (
    <>
      <NavTab config={configTab} onChange={e => getActions(e, 'tab')} />
    </>
  )

🔹 Properties

Parameter	Data Type	Constraint	Description
tabs	Array	Required	Display the label inside the object of this array. label = String value = String status = String
selected	String	Required	The selected value of the tab.

🔹 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