# TabLayout

**Repository Path**: hatch123/tab-layout

## Basic Information

- **Project Name**: TabLayout
- **Description**: TabLayout provides a horizontal layout to display tabs.
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-06-07
- **Last Updated**: 2024-06-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Tabs, tabbar, tablayout

## README

## 开发环境

DevEco Studio NEXT Developer Preview1,Build Version: 4.1.3.700

Api版本：**11**

hvigorVersion：4.1.2

## 下载安装

通过如下两种方式设置har包依赖信息

### 1、远程依赖方式使用【推荐】

方式一：在Terminal窗口中，执行如下命令安装三方包，DevEco Studio会自动在工程的oh-package.json5中自动添加三方包依赖。

```
ohpm install @hatch/tab-layout
```

方式二：在工程的oh-package.json5中设置三方包依赖，配置示例如下：

```
"dependencies": { "@hatch/tab-layout": "^1.0.0"}
```

## 使用方法

```
  @Builder
  itemPage(name: string, index: number) {
    Text(`${name}-${index}`)
      .fontSize(20)
      .width('100%')
      .height('100%')
  }

  build() {
    Row() {
      Column() {
        TabLayout({
          tabBar: Array("推荐", "人工智能", "Java", "C/C++", "Kotlin", "科技前沿", "youtube", "twitter"),
          tabAttribute: (tabStyle: TabStyle) => {
            tabStyle.tabPaddingStart = 10;
            tabStyle.tabPaddingEnd = 10;
            tabStyle.contentMargin = 10
          },
          contentBuilder: (name: string, number: number) => {
            this.itemPage(name, number)
          }
        });
      }
      .width('100%')
    }
    .height('100%')
  }
```