Tab 标签页

介绍

选项卡组件，用于在不同的内容区域之间进行切换。

引入

import {IBestTabs, IBestTabItem, IBestTabItemType} from "@ibestservices/ibest-ui"

代码演示

基本用法

点我查看代码

@Entry
@Component
struct DemoPage {
  @State tabsList: IBestTabItemType[] = [
    {
      label: "标签一",
      name: "1"
    },
    {
      label: "标签二",
      name: "2"
    },
    {
      label: "标签三",
      name: "3"
    },
    {
      label: "标签四",
      name: "4"
    },
    {
      label: "标签五",
      name: "5"
    }
  ]
  @State curTabName: string = "1"
  build() {
    Column(){
      IBestTabs({
        tabsList: this.tabsList,
        currentName: $curTabName
      })
    }
  }
}

样式风格

点我查看代码

@Entry
@Component
struct DemoPage {
  @State tabsList: IBestTabItemType[] = [
    {
      label: "标签一",
      name: "1"
    },
    {
      label: "标签二",
      name: "2"
    },
    {
      label: "标签三",
      name: "3"
    },
    {
      label: "标签四",
      name: "4"
    },
    {
      label: "标签五",
      name: "5"
    }
  ]
  @State curTabName: string = "1"
  build() {
    Column(){
      IBestTabs({
        tabsList: this.tabsList,
        type: "card",
        currentName: $curTabName
      })
    }
  }
}

收缩布局

TIP

通过 tabWidthType 属性可设置单个tab的宽度类型。

点我查看代码

@Entry
@Component
struct DemoPage {
  @State tabsList: IBestTabItemType[] = [
    {
      label: "标签一",
      name: "1"
    },
    {
      label: "标签二",
      name: "2"
    },
    {
      label: "标签三",
      name: "3"
    },
    {
      label: "标签四",
      name: "4"
    },
    {
      label: "标签五",
      name: "5"
    }
  ]
  @State tabsList1: IBestTabItem[] = [
    new IBestTabItem({
      label: "标签一",
      name: "1"
    }),
    new IBestTabItem({
      label: "标签二",
      name: "2"
    }),
    new IBestTabItem({
      label: "标签三",
      name: "3"
    }),
    new IBestTabItem({
      label: "标签四",
      name: "4"
    }),
    new IBestTabItem({
      label: "标签五",
      name: "5"
    }),
    new IBestTabItem({
      label: "标签六",
      name: "6"
    }),
    new IBestTabItem({
      label: "标签七",
      name: "7"
    }),
    new IBestTabItem({
      label: "标签八",
      name: "8"
    }),
    new IBestTabItem({
      label: "标签九",
      name: "9"
    }),
    new IBestTabItem({
      label: "标签十",
      name: "10"
    })
  ]
  @State curTabName: string = "1"
  @State curTabName1: string = "1"
  build() {
    Column({space: 20}){
      IBestTabs({
        tabHeight: 60,
        tabWidthType: "auto",
        tabsList: this.tabsList,
        currentName: $curTabName
      })
      IBestTabs({
        tabHeight: 60,
        tabWidthType: "auto",
        tabsList: this.tabsList1,
        currentName: $curTabName
      })
      IBestTabs({
        tabHeight: 60,
        tabWidthType: "auto",
        type: "card",
        tabsList: this.tabsList,
        currentName: $curTabName1
      })
      IBestTabs({
        tabHeight: 60,
        tabWidthType: "auto",
        type: "card",
        tabsList: this.tabsList1,
        currentName: $curTabName1
      })
    }
    .alignItems(HorizontalAlign.Start)
  }
}

固定线宽

TIP

通过 isTabLineWidthFixed 属性可设置标记线宽是否固定，通过lineOffsetY属性设置标记线偏移量。

点我查看代码

@Entry
@Component
struct DemoPage {
  @State tabsList: IBestTabItemType[] = [
    {
      label: "标签一",
      name: "1"
    },
    {
      label: "标签二",
      name: "2"
    },
    {
      label: "标签三",
      name: "3"
    },
    {
      label: "标签四",
      name: "4"
    },
    {
      label: "标签五",
      name: "5"
    }
  ]
  @State curTabName: string = "1"
  build() {
    Column(){
      IBestTabs({
        tabsList: this.tabsList,
        tabHeight: 80,
        isTabLineWidthFixed: true,
        tabLineWidth: 30,
        lineOffsetY: 10,
        currentName: $curTabName
      })
    }
  }
}

禁用标签

TIP

如需动态修改标签内容, 请使用 IBestTabItem 实例, 通过列表项中 isDisable 属性可设置单项是否禁用。

点我查看代码

import { IBestButton } from '@ibestservices/ibest-ui'
@Entry
@Component
struct DemoPage {
  @State tabsList: IBestTabItem[] = [
    new IBestTabItem({
      label: "标签一",
      name: "1"
    }),
    new IBestTabItem({
      label: "标签二",
      name: "2",
      isDisable: true
    }),
    new IBestTabItem({
      label: "标签三",
      name: "3"
    })
  ]
  @State curTabName: string = "1"
  build() {
    Column({space: 20}){
      IBestTabs({
        tabsList: this.tabsList,
        currentName: $curTabName
      })
      IBestButton({
        text: "禁用标签3",
        buttonSize: "small",
        onClickBtn: () => {
          this.tabsList[2].isDisable = !this.tabsList[2].isDisable
        }
      })
    }
  }
}

自定义标签内容

TIP

通过列表项中 icon 属性可添加图片，通过列表项中 number 属性可添加数字。

点我查看代码

import { IBestButton } from '@ibestservices/ibest-ui'
@Entry
@Component
struct DemoPage {
  @State tabsList: IBestTabItem[] = [
    new IBestTabItem({
      label: "标签一",
      name: "1",
      icon: "https://ibestui.ibestservices.com/favicon.ico"
    }),
    new IBestTabItem({
      label: "标签二",
      name: "2",
      number: 1
    }),
    new IBestTabItem({
      label: "标签三",
      name: "3"
    })
  ]
  @State curTabName: string = "1"
  build() {
    Column({space: 20}){
      IBestTabs({
        tabsList: this.tabsList,
        currentName: $curTabName
      })
      IBestButton({
        text: "修改数字",
        buttonSize: "small",
        onClickBtn: () => {
          if(this.tabsList4[1].number != undefined){
            this.tabsList4[1].number += 1
          }
        }
      })
    }
  }
}

onChange事件

点我查看代码

import { IBestToast } from '@ibestservices/ibest-ui'
@Entry
@Component
struct DemoPage {
  @State tabsList: IBestTabItemType[] = [
    {
      label: "标签一",
      name: "1"
    },
    {
      label: "标签二",
      name: "2"
    },
    {
      label: "标签三",
      name: "3"
    },
    {
      label: "标签四",
      name: "4"
    },
    {
      label: "标签五",
      name: "5"
    }
  ]
  @State curTabName: string = "1"
  build() {
    Column(){
      IBestTabs({
        tabsList: this.tabsList,
        currentName: $curTabName,
        onChange: name => {
          IBestToast.show("当前点击的是：" + name)
        }
      })
    }
  }
}

内容联动

点我查看代码

@Entry
@Component
struct DemoPage {
  @State tabsList: IBestTabItemType[] = [
    {
      label: "标签一",
      name: "1"
    },
    {
      label: "标签二",
      name: "2"
    },
    {
      label: "标签三",
      name: "3"
    },
    {
      label: "标签四",
      name: "4"
    },
    {
      label: "标签五",
      name: "5"
    }
  ]
  @State curTabName: string = "1"
  @Builder tabContent(){
    ForEach([1,2,3,4,5], (item: number) => {
      Row(){
        Text(item.toString())
          .fontColor("#fff")
      }
      .width("100%")
      .height(200)
      .justifyContent(FlexAlign.Center)
      .backgroundColor("#ccc")
    })
  }
  build() {
    Column(){
      IBestTabs({
        tabsList: this.tabsList,
        currentName: $curTabName
      }){
        this.tabContent()
      }
    }
  }
}

API

@Props

参数	说明	类型	默认值
currentName	当前选中标签的标识符, 支持双向绑定	number \| string	`''`
type	样式类型，可选值为 `line` `card`	string	`line`
tabHeight	默认高度	number \| string	`35`
tabWidthType	tab宽度类型，可选值为 `auto` `flex`	string	`flex`
tabsList	展示的tab列表	(IBestTabItemType \| IBestTabItem)[]	`[]`
tabPadding	单个tab内边距	number \| string	`5`
isTabLineWidthFixed	标记线宽度是否固定	boolean	`false`
tabLineWidth	标记线宽度，默认为tab内容宽度	number \| string	`0`
tabLineHeight	标记线高度	number \| string	`2`
inactiveTextColor	未激活的tab文字颜色	ResourceColor	`#666`
activeTextColor	激活的tab文字颜色	ResourceColor	`#333`
tabLineColor	type 为 `line` 时, 为标记线颜色, type 为 `card` 时, 为标记块背景色	ResourceColor	`#3D8AF2`
lineOffsetY	标记线Y方向偏移量	number \| string	`0`
tabBgColor	tab区域背景颜色	ResourceColor	`#fff`
fontSize	tab文字大小	number \| string	`14`
isShowActiveBg	是否显示激活背景, 仅type为`line`时有效	boolean	`false`
activeBgColor	激活背景色, 仅type为`line`时有效	ResourceColor	`''`
inactiveBgColor	非激活背景色, 仅type为`line`时有效	ResourceColor	`''`
radius	选项圆角, 仅type为`line`时有效	number \| string	`0`
showActiveLine 2.0.9	是否显示激活标记线, 仅type为`line`时有效	boolean	`true`
tabLineRadius 2.0.9	标记线圆角, 仅type为`line`时有效	number \| string	`0`
activeFontWeight 2.0.9	激活文字字重	FontWeight	`Normal`
activeFontSize 2.0.9	激活文字大小	number \| string	`14`

IBestTabItem IBestTabItemType 数据结构

参数	说明	类型	默认值
label	tab文字内容(必填)	ResourceStr	`-`
name	tab匹配的标识符(必填)	string \| number	`-`
number	自定义显示数量	number	`-`
icon	自定义显示图片	ResourceStr	`-`
isDisable	控制是否禁用	boolean	`false`

插槽

插槽名	说明	类型
tabContentBuilder 2.0.9	自定义tab内容	CustomBuilder

Events

事件名	说明	参数类型
onChange	tab切换后的回调	`name: string \| number`
onTabClick	点击tab后的回调	`name: string \| number`

Tab 标签页 ​

介绍 ​

引入 ​

代码演示 ​

基本用法 ​

样式风格 ​

收缩布局 ​

固定线宽 ​

禁用标签 ​

自定义标签内容 ​

onChange事件 ​

内容联动 ​

API ​

@Props ​

IBestTabItem IBestTabItemType 数据结构 ​

插槽 ​

Events ​

Tab 标签页

介绍

引入

代码演示

基本用法

样式风格

收缩布局

固定线宽

禁用标签

自定义标签内容

onChange事件

内容联动

API

@Props

IBestTabItem IBestTabItemType 数据结构

插槽

Events