@clipmx/bottom-navigation

Clip Bottom Navigation

Installation

npm install @clipmx/bottom-navigation --save

Usage

import React from 'react';
import BottomNavigation, { BottomNavigationAction } from '@clipmx/bottom-navigation';
import Menu from '@material-ui/icons/Menu';
import Dashboard from '@material-ui/icons/Dashboard';
import SupervisorAccount from '@material-ui/icons/SupervisorAccount';
import Account from '@material-ui/icons/AccountCircle';
import AttachMoney from '@material-ui/icons/AttachMoney';

class MyComponent extends React.Component {
  this.state = { selected: 3 };

  handleOnChange = (event, value) => this.setState({ selected: value } );

  render() {
    return (
      <div>
        <BottomNavigation showLabels={false} onChange={this.handleOnChange} value={this.state.selected}>
          <BottomNavigationAction icon={<Account />} label="Item1" />
          <BottomNavigationAction icon={<SupervisorAccount />} label="Item2" />
          <BottomNavigationAction icon={<AttachMoney />} label="Item3" />
          <BottomNavigationAction icon={<Dashboard />} label="Item4" />
          <BottomNavigationAction icon={<Menu />} label="Item5" />
        </BottomNavigation>
      </div>
    );
  }
}

export default MyComponent;

Props

This is a wrapper of the Material-UI BottomNavigation and Material-UI BottomNavigationAction, so you can use any props that Material-UI supports.