@licuido-ui/ui_bottom-tab NPM

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

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

bottomTab

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.

@emotion/react @emotion/styled @mui/material react react-dom

@licuido-ui/react

0.0.2

8 months ago