# FloatTabBar

**Repository Path**: liang_can/float-tab-bar

## Basic Information

- **Project Name**: FloatTabBar
- **Description**: 一款使用场景非常广泛的底部导航栏组件，对其进行了一定程度的美化，支持高度自定义设置。
- **Primary Language**: TypeScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 0
- **Created**: 2024-03-23
- **Last Updated**: 2025-04-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Float Tab Bar
## 简介
> 这是一款使用场景非常广泛的底部导航栏组件，对其进行了一定程度的美化，支持高度自定义设置。
> 正在逐步完善中，欢迎大家提出意见和建议。
## 下载安装
`ohpm install @zhaolei/float-tab-bar`
## 使用方式
`import { FloatTabBar } from '@zhaolei/float-tab-bar'`
### 重点提醒：使用前请在当前**struct**中声明一个`number`类型的名为`currentIndex`的变量，此变量**需要**被`@Provide`装饰器所修饰，作用是用来反应当前用户点击了哪个按钮。
### 底部按钮序号**从0递增**，浮动按钮序号总是等于**底部按钮数组.length**
```
@Provide currentIndex: number = 0   // 控制页面切换

build() {
  Column() {
    FloatTabBar({
      // 这个值下面有重点说明
      tabBarWidth: px2vp(1080)
    }) {
      Column() {
        if (this.currentIndex === 0) {
          Column() {
            Text('第一个页面组件')
            Text('根据自己需求添加组件')
          }
        }
        
        if (this.currentIndex === 1) {
          Column() {
            Text('第二个页面组件')
            Text('根据自己需求添加组件')
          }
        }
        
        ......
        
      }
    }
  }
}
```
### 演示如下

![演示](https://pic.imgdb.cn/item/660f597068eb935713c41529.gif "使用演示")
## 属性说明
### 注意：以下所提所有属性皆非必填，请根据需求自行选择
- 属性项添加**角标**的均在下方有详细属性说明

|           名称            | 类型                                                                 | 默认值       | 说明                               |
|:-----------------------:|:-------------------------------------------------------------------|:----------|:---------------------------------|
| tabBarWidth<sup>*</sup> | number                                                             | 当前设备屏幕宽度  | TabBar的宽，暂不支持百分比设置，单位：vp         |
|      tabBarHeight       | number                                                             | 80vp      | TabBar的高，暂不支持百分比设置，单位：vp         |
|      tabBarRadius       | `{topLeft: number, topRight:number} &#124; number`                 | 20vp      | TabBar左上角和右上角圆角半径，为0则无圆角，单位vp    |
|     tabBarFillColor     | ResourceColor                                                      | #373936   | TabBar背景填充色                      |
|  tabBarButtonContents   | fixedTuple&lt;TabBarButtonContentsAttr<sup>1</sup>&gt;<sup>**<sup> | 无         | 底部按钮内容列表，限制最小为2个元素，最大为6个元素       |
|       floatButton       | FloatButtonAttr<sup>2</sup>                                        | 无         | 浮动按钮设置，当tabBar底部的按钮数量为奇数时浮动按钮不展示 |
|          text           | TextAttr<sup>3</sup>                                               | 无         | 底部按钮文本设置                         |
|          icon           | IconAttr<sup>4</sup>                                               | 无         | 底部按钮图标设置                         |
|          curve          | CurveAttr<sup>***</sup>                                            | default模式 | 中间部分承载浮动按钮的挖槽，详见下方说明 |

### 详细说明
> #### tabBarWidth<sup>*</sup>:
> - 如果没有显式指定宽度值，在**真机**或**模拟器**上运行时
>   默认会获取设备`屏幕宽度`作为`width`值，
> - **由于在编写代码过程中无法自动获取预览器的尺寸信息(或许是我不知道怎么获取😂)，会给调试造成很大的麻烦，
> 因此建议在编写代码过程中显式指定此值为预览器的宽。**
> - 注意：预览器中显示的宽度值单位为px，你需要使用`px2vp()`函数将其转为vp

> #### fixedTuple&lt;TabBarButtonContentsAttr&gt;<sup>**<sup>
> - 源码：
> 
>   ```typescript 
>   type fixedTuple<T> = [T, T, T?, T?,T?,T?];
>   ```
> - 限定任意一种类型的长度[2-6]之间的数组

> #### CurveAttr<sup>***</sup>
> - 中间挖槽区域的属性控制
> - 参数`mode`，挖槽模式：(详情见下图)
>   - defalut模式
>   - circle模式
>   - smooth模式
>   - moreSmooth模式
> - 参数`curveDiameter`(详见下图中标注)
>   - 挖槽曲线的起点到终点的直线距离，单位：vp
> - 参数`curveDeepValue`(详见下图中标注)
>   - 挖槽曲线的深度，即起点到终点直线距离之间连线与挖槽最深处的距离，单位：vp

### 其他重要属性
- #### TabBarButtonContentsAttr<sup>1</sup>
  - 控制底部按钮属性样式

| 内部属性           | 类型                               | 说明                   |
|----------------|----------------------------------|----------------------|
| imgSrc         | ResourceStr                      | 当前按钮的图标地址            |
| selectedImgSrc | ResourceStr                      | 当前按钮被选中时的图标地址，为空时无选中切换图标效果 |
| imgWidth       | `string &#124; number` | 当前按钮宽度值，默认值：30vp     |
| text           | ResourceStr                      | 当前按钮的文本，为空时不展示文本     |
| selectedText   | ResourceStr                      | 参考`selectedImgSrc`   |
- #### FloatButtonAttr<sup>2</sup>
  - 控制浮动按钮属性样式

| 内部属性             | 类型            | 说明                             |
|------------------|---------------|--------------------------------|
| imgSrc           | ResourceStr   | 参考上述`imgSrc`，下同                |
| selectedImgSrc   | ResourceStr   |                                |
| imgWidth         | number        | 浮动按钮的宽度，暂不支持百分比设置，默认值：50vp     |
| borderRadius     | number        | 浮动按钮的圆角尺寸，仅支持四角统一设置，默认值25vp    |
| selectedColor    | ResourceColor | 浮动按钮选中时的填充颜色                   |
| notSelectedColor | ResourceColor | 浮动按钮未选中时的填充颜色                  |
| isShow           | boolean       | 是否显示浮动按钮，浮动按钮的显示由此值和底部按钮数量共同决定 |
| marginBottom     | number        | 浮动按钮与凹陷部分的间距，默认值：5vp           |
| backgroundColor  | ResourceColor | 浮动按钮的背景色，默认无背景色                |
- #### TextAttr<sup>3</sup>
  - 底部按钮上文本属性样式的统一控制

| 内部属性             | 类型                                       | 说明                           |
|------------------|------------------------------------------|------------------------------|
| selectedColor    | ResourceColor                            | 选中文本颜色                       |
| notSelectedColor | ResourceColor                            | 未选中文本颜色，默认值：#ffa5ae96        |
| isShowText       | boolean                                  | 是否显示文本，文本的显示由此值和文本内容是否为空共同决定 |
| fontSize         | `number &#124; string &#124; Resource`   | 文本字体大小，默认值：15                |
| fontWeight       | `number &#124; FontWeight &#124; string` | 文本字体磅数                       |
- #### IconAttr<sup>4</sup>
  - 底部按钮上图标属性样式的统一控制

| 内部属性             | 类型            | 说明                    |
|------------------|---------------|-----------------------|
| selectedColor    | ResourceColor | 选中图标颜色                |
| notSelectedColor | ResourceColor | 未选中图标颜色，默认值：#ffa5ae96 |
| isShowIcon       | boolean       | 是否显示图标                |
| borderRadius     | number        | 设置图标圆角                |

### **Curve**各内置模式展示
#### 首先需要导入`CurveModeEnum`枚举
```typescript
import { CurveModeEnum } from '@ohos/library';

......
FloatTabBar({
  tabBarWidth: px2vp(1080),
  curve: {
    mode: CurveModeEnum.smooth
  }
})
......
```
- default模式(默认模式，缺省即可)
![default](https://pic.imgdb.cn/item/660f599c68eb935713c465a2.png)
- circle模式
![circle](https://pic.imgdb.cn/item/660f59b068eb935713c48c6f.png)
- smooth模式
![smooth](https://pic.imgdb.cn/item/660f59c068eb935713c4afdc.png)
- moreSmooth
![moreSmooth](https://pic.imgdb.cn/item/660f59cc68eb935713c4cae1.png)

### Features
#### 适配多端设备、设备横屏（优先实现）
#### 浮动按钮位置可控
#### 添加更多动画效果并可自定义
#### 。。。