# BottomNavigationBar

**Repository Path**: OpenHarmony1/BottomNavigationBar

## Basic Information

- **Project Name**: BottomNavigationBar
- **Description**: 一个带动画以及角标的自定义底部导航栏
- **Primary Language**: TypeScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-10-31
- **Last Updated**: 2023-05-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# BottomNavigationBar

#### 项目介绍
    - 该组件是一个动画切换NavigationBar的自定义组件

#### 项目演示

![输入图片说明](./screenshot/demo_1.gif)


##### 基础用法
   ```java 
   //更多用法请参照Demo代码演示
   BottomNavigationBar({
        firstSelectedPosition: 0,//默认选中的位置，不指定默认为0
        mode: $mMode,
        //background: '#339900',
        showIndicatorBar: $showIndicatorBar,
        builderIndicatorBar:this.builderIndicatorBar as Function,//如果想自定义indicatorBar则放开注释
        onTabSelected: (position: number) => {
        console.log('onTabSelected:' + position)
        this.index = position
        },
        onTabUnselected: (position: number) => {
        console.log('onTabUnselected:' + position)
        },
        onTabReselected: (position: number) => {
        console.log('onTabReselected:' + position)
        },
        onInflateComplete: (bottomNavigationBar: BottomNavigationBar) => {
        this.bottomNavigationBar = bottomNavigationBar
        },
        mNavigationBarList: $mNavigationBarList
        })
   
   

   ```   

#### 接口及属性
| **属性**                             | **必填** | **说明**                                                   |
| ------------------------------------ | :------: | --------------------------------------------------------- |
| firstSelectedPosition:  number       |    否    | 第一次进入是选中的Tab index，默认0                           |
| mode: BottomNavigationStyle          |    否    | NavigationBar样式，BottomNavigationStyle.MODE_DEFAULT      |
| showIndicatorBar: Boolean            |    是    | 是否现实Indicator                                          |
| background: string                   |    否    | 背景颜色，默认 #ECE9ED                                      |
| builderIndicatorBar: Function        |    否    | 自行自定义Indicator，默认是一个白色带圆角的视图                |
| onTabSelected: Function              |    否    | 选中回调，参数(position: number)                                         |
| onTabUnselected: Function            |    否    | 从选中变为未选中的回调，参数(position: number)                                        |
| onTabReselected: Function            |    否    | 重复选中的回调，参数(position: number)                                       |
| onInflateComplete: Function          |    否    | 为回调给调用者一个ViewSwitcher对象，方便做后续操作, 函数结构:(obj: BottomNavigationBar) => void     |
| mNavigationBarList: Array<BottomNavigationItem>    |    是    | NavigationBar数据                  |


#### 版权和许可信息

```
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
```