PagerSlidingTabStrip

Introduction

PagerSlidingTabStrip is an interactive indicator to navigate between the different pages.As a product adapted from PagerSlidingTabStrip, this library can run on OpenHarmony, reusing its APIs and features.

Effect

How to Install

ohpm install @ohos/pagerslidingtabstrip

For details about the OpenHarmony ohpm environment configuration, see OpenHarmony HAR.

How to Use

Import and use

import { PagerSlidingTabStrip, TabItem } from '@ohos/pagerslidingtabstrip';

...

// customize TabItem
@Local contactTabs: TabItem[] = [
 { id: "gplus", image: $r('app.media.ic_launcher_gplus') },
 { id: "gmail", image: $r('app.media.ic_launcher_gmail') },
 { id: "gmaps", image: $r('app.media.ic_launcher_gmaps') },
 { id: "chrome", image: $r('app.media.ic_launcher_chrome') },
];

// customize content
@Builder
contactContent(tab: TabItem, index: number) {
// Different layout pages can be displayed based on the id in the tab, which is not demonstrated here.
Column() {
  Text('PAGE' + (index + 1))
}
.justifyContent(FlexAlign.Center)
.width('100%')
.height('100%')
.backgroundColor("#DCDCDC")
}

build() {
  PagerSlidingTabStrip({
     pstsUnderlineColor: "#FF33B5E6",
     pstsTabPaddingLeftRight: 14,
     pstsIndicatorColor: "#FF33B5E6",
     pstsDividerColor: "#00000000",
     barHeight: 62,
     barBackgroundImage: $r('app.media.tabs_pattern_diagonal'),
     barBackgroundImageRepeat: ImageRepeat.XY,
     barBackgroundImageSize: { width: 5, height: 5 },
     pstsShouldExpand: false,
     tabBars: this.contactTabs,
     initialPosition: 1,
     buildTabContent: (tab, index): void => this.contactContent(tab, index)
     onPageSelected: (index) => {
        console.log(`Page selection callback: ${index}`)
     },
     onPageScrolled: (position, positionOffset, positionOffsetPixels) => {
        console.log(`Page scrolling callback: position: ${position}，positionOffset: ${positionOffset}，positionOffsetPixels: ${positionOffsetPixels}`)
     },
     onPageScrollStateChanged: (state) => {
        console.log(`Callback for page scrolling state change: ${state}`)
     }
  })
}

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

Available APIs

Parameter Name	Type	Required	Description
tabBars	TabItem[]	Yes	Tab bar content
initialPosition	number	No	Initial selected tab index, default: 0
pstsIndicatorColor	ResourceColor	No	Indicator color, default: '#FF666666'
pstsUnderlineColor	ResourceColor	No	Underline color, default: '#1A000000'
pstsDividerColor	ResourceColor	No	Tab divider color, default: '#1A000000'
pstsIndicatorHeight	number	No	Indicator height, default: 8
pstsUnderlineHeight	number	No	Tab bar underline height, default: 2
pstsDividerPadding	number	No	Divider top and bottom padding, default: 12
pstsTabPaddingLeftRight	number	No	Tab left and right padding, default: 24
pstsScrollOffset	number	No	Scroll offset, default: 52
touchedTabBackground	ResourceColor	No	Tab background color in pressed state, default: '#6633B5E5'
selectedTabBackground	ResourceColor	No	Tab background color in selected state, default: Color.Transparent
pstsShouldExpand	boolean	No	Whether to distribute tab widths equally, default: false
pstsTextAllCaps	boolean	No	Whether tab text is all uppercase, default: true
tabTextSize	number | string | Resource	No	Tab text size, default: 12
tabTextColor	ResourceColor	No	Tab text color, default: '#FF666666'
tabTextFontFamily	string | Resource	No	Tab text font family
tabTextFontWeight	string | number | FontWeight	No	Tab text font weight, default: 600
tabTextFontStyle	FontStyle	No	Tab text font style, default: FontStyle.Normal
tabImgWidth	number	No	Tab icon width, default: 35
tabImgHeight	number	No	Tab icon height, default: 35
barHeight	number	No	Tab bar height, default: 48
barBackgroundImage	ResourceStr | image.PixelMap	No	Tab bar background image, default: ''
barBackgroundImageRepeat	ImageRepeat | undefined	No	Tab bar background image repeat style, default: undefined
barBackgroundImageSize	SizeOptions | ImageSize	No	Tab bar background image size, default: ImageSize.Auto

Method	Parameters	Return	Required	Description
buildTabContent	tab: TabItem, index: number	void	Yes	Custom tab page content, need to pass a custom builder function (method decorated with @Builder)
onPageSelected	index: number	void	No	Callback when page is selected (returns selected index)
onPageScrolled	position: number, positionOffset: number, positionOffsetPixels: number	void	No	Page scroll callback. - position: Base page index (leftmost visible page index, e.g., page 0 when scrolling from 0 to 1, or page 0 when scrolling from 1 to 0) - positionOffset: Scroll progress of the adjacent right page (range: [0, 1)) - positionOffsetPixels: Pixel value of positionOffset × page width
onPageScrollStateChanged	state: ScrollState	void	No	Page scroll state change callback. - 0: Idle state - 1: Dragging state (finger scrolling) - 2: Fling state (inertial scrolling after release).(Supported since API version 20)

TabItem Interface Properties：

Name	Type	Read-only	Optional	Description
id	string	No	No	Unique tab identifier
text	string	No	Yes	Tab display text. If image is set, this text will not be rendered.
image	Resource	No	Yes	Tab display icon

Constraints

This project has been verified in the following versions:

• DevEco Studio: 6.0.1 Release（6.0.1.260）, SDK: API20(6.0.0.47)

Directory Structure

|---- ohos_PagerSlidingTabStrip  
|     |---- entry  # Sample code
|     |---- library  # ohos_PagerSlidingTabStrip library
|     |     |   └─src
|     |     |   │---└─main  
|     |     |   |----   └─ets
|     |     |   │----      └──components  # Default directory
|     |     |                 │----PagerSlidingTabStrip.ets
|     |     |                 │----SlidingTabController.ets
|     |     |---- index.ets  # External APIs
|     |---- README.md  # Readme    
|     |---- README_zh.md  # Readme            

How to Contribute

If you find any problem when using the project, submit an issue or a PR.

License

This project is licensed under Apache License 2.0.