# SlidingTabs

**Repository Path**: daryl_code/sliding-tabs

## Basic Information

- **Project Name**: SlidingTabs
- **Description**: 基于(状态管理V2)的Tabs组件,更灵活的布局和更丝滑的Tab切换,支持自定义TabItem和TabIndicator
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2025-02-05
- **Last Updated**: 2025-02-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## SlidingTabs
***
### 简介
SlidingTabs是一个支持[状态管理V1](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-state-management-v1-V5)和[状态管理V2](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-state-management-v2-V5)的Tabs组件，相比系统的Tabs组件有以下优势和特点：
1. SlidingTabs布局更加灵活，不与Swiper强制绑定在一起，用户可根据需求自定义搭配
2. SlidingTabs可自定义TabItem和TabIndicator满足更多个性化需求
3. SlidingTabs有更好的Tab切换体验
### 下载安装
```
ohpm install @xqw/sliding-tabs
```
### 预览效果
![效果图](./sliding-tabs.gif)
### 使用说明
```
@Local tabs = ["全部","我的自选","持仓"]
tabController = new SlidingTabControllerV2()
SlidingTabsV2({
    tabs: this.tabs,
    barMode : "fixed",
    tabController: this.tabController,
    showIndicator:false,
    tabStyle:{
      fontColorSelect:Color.Blue,
      fontSize:20,
      fontWeightSelect:FontWeight.Medium,
    },
    indicatorStyle:{
      alignment:Alignment.Top,
      wrapTab:true,
      padding:20
    }
  })
```
### 搭配Swiper使用
```
SlidingTabsV2({
    tabs: this.scrollTabs,
    barMode : "scroll",
    tabController: this.tabController4,
    tabStyle:{
      fontColorSelect:Color.Blue
    },
    indicatorStyle:{
      wrapTab:true,
    },
    onChange:(index)=>{
      console.error("切换Tab ",index)
    }
  })
  Swiper(this.tabController4.swiperController){
    ForEach(this.scrollTabs,(item:string,index)=>{
      Stack()
      {
        Text("This Is Page -> "+item)
      }
        .width('100%').height('100%')
    })
  }.layoutWeight(1)
  .onGestureSwipe((index,extraInfo)=>{
    this.tabController4.swiperOnGestureSwipe(index,extraInfo)
  })
  .onAreaChange((oldValue,newValue)=>{
    this.tabController4.swiperOnAreaChange(oldValue,newValue)
  })
  .onAnimationStart((index,targetIndex,extraInfo)=>{
    this.tabController4.swiperOnAnimationStart(index,targetIndex,extraInfo)
  })
```
### 属性说明

| 参数名称 | 入参类型                    | 说明                     | 
|------|-------------------------|------------------------| 
| tabs  | string[]                | Tab标题                  | 
| onChange | (index: number) => void | 选中Tab回调函数              |
|tabStyle| ITabStyle               | Tab样式                  |
|barMode| BarMode                 | Tab滚动样式scroll or fixed |
|onTabItemBuilder|(tab: string, index: number) => void| 自定义TabItem             |
|onTabIndicatorBuilder|() => void| 自定义Tab指示器              |
|tabController|SlidingTabController| tab控制器|

### ITabStyle属性说明
|参数名称| 入参类型           | 说明                                           |
|--|----------------|----------------------------------------------|
|barHeight| number         | TabBar高度，默认50                                |
|tabItemPadding| number         | TabItem左右Padding 默认6                         |
|animationDuration| number         | 动画时长                                         |
|fontSize| number         | 文字大小                                         |
|fontSizeNormal| number         | 默认文字大小                                       |
|fontSizeSelect| number         | 选中文字大小                                       |
|fontColor| ResourceColor  | 文字颜色                                         |
|fontColorSelect| ResourceColor  | 选中文字颜色                                       |
|fontColorNormal| ResourceColor  | 默认文字颜色                                       |
|fontWeight| FontWeight     | 文字权重                                         |
|fontWeightNormal| FontWeight     | 默认文字权重                                       |
|fontWeightSelect| FontWeight     | 选中文字权重                                       |
|showIndicator| boolean        | 是否显示指示器                                      |
|indicatorWidth| number         | 指示器宽度                                        |
|indicatorHeight| number         | 指示器高度                                        |
|indicatorPadding| number｜Padding | 指示器内部Padding                                 |
|indicatorMargin| number｜Padding | 指示器外部边距                                      |
|indicatorColor| ResourceColor  | 指示器颜色                                        |
|indicatorRadius| number         | 指示器圆角                                        |
|indicatorAlignment| Alignment      | 指示器位置                                        |
|indicatorWidthWrapTab| boolean        | 如果为true指示器宽度自适应tab宽度，false则以indicatorWidth为准 |

### 更多使用请查看[Index.ets](https://gitee.com/XiaoQiWen/sliding-tabs/blob/main/entry/src/main/ets/pages/Index.ets)

### 问题反馈
使用过程中有任何使用问题和Bug都可以提Issue,我会抽空查看和解决问题的。