README.md · OpenHarmony-SIG/ohos_circle_indicator

# CircleIndicator

## Introduction

**CircleIndicator** is a UI component library that provides a variety of indicators for the **Tabs** and **Swiper** containers.

## Effect

**Circle indicator**

**Line indicator**

All the APIs with b**length**b

**Triangle indicator**

**Icon indicator**

**Tabs indicator with center view**

**Fixed-position Tabs indicator**

**Fixed-position Tabs indicator (capsule style)**

**Fixed-position Tabs indicator (with a badge)**

**Scrollable Tabs indicator**

**Scrollable Tabs indicator (water drop slider)**

**Scrollable Tabs indicator (with the first tab fixed)**

**Titles indicator**

## How to Install

````
ohpm install @ohos/circleindicator
````

For details about the OpenHarmony ohpm environment configuration, see [OpenHarmony HAR](https://gitee.com/openharmony-tpc/docs/blob/master/OpenHarmony_har_usage.en.md).

## How to Use

The library provides a variety of indicators. The following uses **TriangularIndicator** as an example. The usage is the same for other indicators.

1. Instantiate **TabsController** and a **Model** object, and add a member of the number type to record the subscript of the current page.

```
private controller: TabsController = new TabsController()
@State model: TriangularModel = new TriangularModel(this.controller)
@State itemIndex: number = 0
 ```

2. Set UI properties through the **Model** object and add required callbacks.

```
aboutToAppear() {
  this.model
    .setReverse(true)
    .setLineHeight(4)
    .setTriangleHeight(10)
    .setLineColor("#e94220")
    .setBackgroundColor("#eeeeee")
    .setChangeListener((itemIndex: number) => {
      console.info("change page to " + this.data[itemIndex])
    })
}
 ```

3. Place the **Indicator** component next to the **Tabs** component. Note that the native bar needs to be closed. Listen for the touch events of the **Tabs** component to process the sliding logic in a unified manner.

```
build() {
  Column() {
    TriangularIndicator({ itemIndex: $itemIndex, count: this.data.length, model: this.model })
    Tabs({ index: this.itemIndex, controller: this.controller }) {
      ...
    }
    .barWidth(0)
    .onTouch((event: TouchEvent) => {
      this.model.notifyTouch(event, this.itemIndex)
    })
  }.padding({ top: 40 })
  .backgroundColor("#eeeeee")
}
 ```

For details, see the implementation on the sample page of the open-source library.

## Available APIs

**model: TriangularModel = new TriangularModel(this.controller)** // (Replace **TriangularModel** with the Model class you use)

| API                                                          | Description                                                  |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| `model.setWidth(width: Length,context?:common.UIAbilityContext)` | Sets the indicator width.<br>**NOTE**<br>1. The value of **width** does not support percent notation.<br>2. Currently, different logic is used to process float.json resources and ets variables without units. The former is processed as px, and the latter is processed as vp. To avoid ambiguity, you are advised to add the unit (px, vp, or fp) for the resource when passing a parameter in the $r('app.float.[id]') format. |
| `model.setHeight(height: Length,context?:common.UIAbilityContext)` | Sets the indicator height.                                   |
| `setBackgroundColor(backgroundColor: ResourceColor)`         | Sets the background color of the indicator.                  |
| `model.notifyTouch(event: TouchEvent, index: number)`        | Sends a notification related to a touch event.               |
| `model.setChangeListener(callback: (index: number) => void)` | Adds a listener for the page transition.                     |

## Constraints

This project has been verified in the following version:

- DevEco Studio: NEXT Beta1-5.0.3.806, SDK: API12 Release(5.0.0.66)

Adaptation for HSP scenario:

In all the indicator configuration classes, all the APIs with **length** as the input parameter are added with an optional parameter **context**. In the HSP scenario, you must pass in the correct **context** so that the resource can be obtained.

In non-HSP scenarios, the **context** parameter can be left unspecified.

## Project Directory

## How to Contribute

If you find any problem when using the project, submit an [Issue](https://gitee.com/openharmony-sig/CircleIndicator/issues) or a [PR](https://gitee.com/openharmony-sig/CircleIndicator/pulls).

## License

This project is licensed under [Apache License 2.0](https://gitee.com/openharmony-sig/CircleIndicator/blob/master/LICENSE).

OpenHarmony-SIG/ohos_circle_indicator
关闭

简介

发行版 (5)

贡献者

语言

近期动态

OpenHarmony-SIG/ohos_circle_indicator关闭 .gitee-modal { width: 500px !important; }

简介

发行版 (5)

贡献者

语言

近期动态

搜索帮助

OpenHarmony-SIG/ohos_circle_indicator
关闭