# PagerSlidingTabStrip

**Repository Path**: OpenHarmony1/PagerSlidingTabStrip

## Basic Information

- **Project Name**: PagerSlidingTabStrip
- **Description**: OpenHarmony侧滑联动组件
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-11-01
- **Last Updated**: 2023-05-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# PagerSlidingTabStrip

#### 项目介绍
    一个和Tab联动切换的页面切换组件，支持切换动画效果

#### 项目演示

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


##### 基础用法
   ```javascript 
   <element src="../../../../../../../library/src/main/js/components/pagerslidingtab.hml" name="pagerslidingtab"></element>
   
   <pagerslidingtab options="{{ tabs2 }}" @on-change='onChange' transition='{{true}}'>
        <text for="{{tabs2}}" class="text" style="width : 100%; height : 100%; text-align : center;">{{$item.text}}</text>
   </pagerslidingtab>
   
   

   ```   

#### 接口及属性
| **属性**                             | **必填** | **说明**                                                   |
| ------------------------------------ | :------: | --------------------------------------------------------- |
| options:  Array                      |    是    | 数据源                              |
| currentIndex: Number                 |    否    | 当前下标，默认0                      |
| transition: Boolean                  |    否    | 是否有动画效果，默认true              |
| duration: Number                     |    否    | 动画时长ms，默认200                  |
| showLine: Boolean                    |    否    | 是否有指示线，默认true                |
| linePercent: Number                  |    否    | 线长百分比，默认1                     |
| lineSize: String                     |    否    | 线高，参数2                          |
| lineColor: String                    |    否    | 线颜色，默认rgb(69, 143, 246)        |
| activeTextColor: String              |    否    | 选中后文字颜色，默认rgb(69, 143, 246) |
| inactiveTextColor: String            |    否    | 未选中文字颜色，默认#000000           |
| activeTextSize: String               |    否    | 选中文字大小，默认15px                |
| inactiveTextSize: String             |    否    | 未选中文字大小，默认15px              |
| loop: Boolean                        |    否    | 是否循环翻页，默认false               |
| fixed: Boolean                       |    否    | Tab是否限定在屏幕宽度内,默认false      |
| itemThreshold: Number                |    否    | 屏幕宽度内最多放几个Tab，默认4         |

#### 版权和许可信息

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