@clipmx/bottom-navigation

    0.1.8 • Public • Published

    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.

    Keywords

    none

    Install

    npm i @clipmx/bottom-navigation

    DownloadsWeekly Downloads

    0

    Version

    0.1.8

    License

    none

    Unpacked Size

    5.75 kB

    Total Files

    7

    Last publish

    Collaborators

    • akira_fes
    • itpayclip
    • dhollerbach