BottomTab

The BottomTab component is a customizable bottom navigation bar for React applications. It provides a user-friendly way to navigate between different sections or pages of the application. The navigation bar consists of a set of icons, and optionally, labels can be displayed alongside the icons to provide additional context.

Author

• @author Akila Kalaiyarasan [email protected]

Link

Story Book Link ButtonGroup

PlayGround

Try it have a fun codeBox

Installation

npm i @licuido-ui/ui_bottom-tab

Import component

import { BottomTab } from '@licuido-ui/ui_bottom-tab';

Usage

<BottomTab  items={[]} />

Image

Sample code

<BottomTab
  items={[
    {
      icon: 'icon1.png',
      label: 'Home',
    },
    {
      icon: 'icon2.png',
      label: 'Profile',
    },
  ]}
  onClick={handleClick}
  variant='withLabel'
  iconActiveBgColor='#ff0000'
  iconInActiveBgColor='#cccccc'
  labelActiveColor='#000000'
  labelInActiveColor='#999999'
  activeFontWeight='bold'
  inActiveFontWeight='normal'
  iconHeightPng='32px'
  iconWidthPng='32px'
  elevation={2}
/>

Props

BottomTab Props

| Name | Type | Description | | ------------------- | ----------------------------- | ----------------------------------------------------------------------------------------------- | | id | string | string | | className | string | Additional CSS class for styling the component. | | sx | SxProps | Custom style prop for using MUI's sx prop. | | items | NavbarItem[] | An array of objects representing each item in the bottom tab bar. | | onClick | (item: NavbarItem) => void | Event handler for when an item is clicked. It receives the clicked NavbarItem as an argument. | | iconActiveBgColor | string | Background color of the active icon. | | iconInActiveBgColor | string | Background color of the inactive icon. | | labelActiveColor | string | Color of the label text when the item is active. | | labelInActiveColor | string | Color of the label text when the item is inactive. | | rootStyle | object | Additional custom style for the root container. | | listStyle | object | Additional custom style for the list container. | | iconStyle | object | Additional custom style for the icon container. | | labelStyle | object | Additional custom style for the label text. | | variant | 'withLabel' | 'withoutLabel' | Variant to display the bottom tab bar with or without labels. | | itemStyle | object | Additional custom style for each individual item container. | | inActiveFontWeight | string | number | Font weight of the label text when the item is inactive. | | activeFontWeight | string | number | Font weight of the label text when the item is active. | | isDisableRipple | true | false | Whether to disable the ripple effect on item click. | | elevation | number | Elevation level of the bottom tab bar. | | iconHeightPng | number | string | Height of the icon when it's in PNG format. | | iconWidthPng | number | string | Width of the icon when it's in PNG format. |