npm package: @licuido-ui/ui_bottom-tab
Description: 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, labe
Latest version: 0.0.2

# 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 <akila@crayond.co>

## Link

[Story Book Link ButtonGroup](http://216.48.182.148:3333/?path=/docs)

### PlayGround

[Try it have a fun codeBox](https://codesandbox.io/p/sandbox/hungry-cache-zglwy6?file=%2Fsrc%2FApp.js%3A16%2C30)


## Installation

```sh
npm i @licuido-ui/ui_bottom-tab
```

## Import component

```jsx
import { BottomTab } from '@licuido-ui/ui_bottom-tab';
```
## Usage

```jsx
<BottomTab  items={[]} />
```
## Image

![bottomTab](./bottomTab.png)

## Sample code

```jsx
<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<Theme>                | 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.                                                      |