MaterialTabIndicator

This library is developed to provide Tab-Bars with different icon types and different bar types implemented using extended typescript.

Download & Install

Install using npm

npm i @ohos/material-tabs

Usage Instructions

1. Import files and code dependencies

import { Tab, TabBarOptions, TabBar, TabBarType, IconType, TabBarModel }  from '@ohos/material-tabs'

2. Initialize TabBar model data

private model: TabBarModel = new TabBarModel()

3. Code for creating Fixed TabBar with No icon(only text)

this.model1
      .setTabBarType(TabBarType.fixed)
      .setTabIconType(IconType.none)
      .setTabBarOptions(this.options)
      
TabBar({
        selectedTabId: 1,
        model: this.model1,
        onSelect: this.onTabSelected
      })

4. Code for creating Fixed TabBar with Top icon

this.model2
      .setTabBarType(TabBarType.fixed)
      .setTabIconType(IconType.top)
      .setTabBarOptions(this.options)
 
TabBar({
        selectedTabId: 1,
        model: this.model2,
        onSelect: this.onTabSelected
      })

5. Code for creating Fixed TabBar with Leading icon

this.model3
      .setTabBarType(TabBarType.fixed)
      .setTabIconType(IconType.leading)
      .setTabBarOptions(this.options)
      
TabBar({
        selectedTabId: 1,
        model: this.model3,
        onSelect: this.onTabSelected
      })

6. Code for creating Scrollable TabBar with No icon(only text)

this.model4
      .setTabBarType(TabBarType.scrollable)
      .setTabIconType(IconType.none)
      .setTabBarOptions(this.options)
      
TabBar({
        selectedTabId: 1,
        model: this.model4,
        onSelect: this.onTabSelected
      })

7. Code for creating Scrollable TabBar with Top icon

this.model5
      .setTabBarType(TabBarType.scrollable)
      .setTabIconType(IconType.top)
      .setTabBarOptions(this.options)
      
TabBar({
        selectedTabId: 1,
        model: this.model5,
        onSelect: this.onTabSelected
      })

8. Code for creating Scrollable TabBar with Leading icon

this.model6
      .setTabBarType(TabBarType.scrollable)
      .setTabIconType(IconType.leading)
      .setTabBarOptions(this.options)
      
TabBar({
        selectedTabId: 1,
        model: this.model6,
        onSelect: this.onTabSelected
      })

Compatibility

Supports OpenHarmony API version 9

Code Contribution

If you find any problems during usage, you can submit an Issue to us. Of course, we also welcome you to send us PR.

Open source License

Licensed under Apache-2.0 license

Reference:

Design by : Nishant Trivedi