...
Nav tab is a component that allows the user to switch tab .or content depending on
...
🔹System Dependencies
...
Code Block |
---|
npm install empower-display --save |
🔹
...
Nav Tab Base Configuration
...
Configuration
Code Block |
---|
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')} /> </> ) |
...
🔹 References
Repository Link: https://gitlabbitbucket.comorg/empowerteams/empower-display.git
NPM Package: https://www.npmjs.com/package/empower-display
...