SwitchTab 选项卡切换

介绍

选项卡切换组件，支持多选项卡切换，激活选项卡凸起效果，相邻选项卡圆角过渡，适用于内容分类展示场景。

引入

import { TnSwitchTab } from "@tuniao/tn-ui";

代码演示

基础用法

通过 modelValue 绑定当前激活的选项卡索引，tabs 设置选项卡标签数组，onChange 监听切换事件。默认三个选项卡，激活项凸起并带圆角过渡效果。

点我查看代码

@Local basicIndex: number = 0;
basicTabs: string[] = ["选项一", "选项二", "选项三"];

TnSwitchTab({
  modelValue: this.basicIndex,
  tabs: this.basicTabs,
  onChange: (index: number) => {
    this.basicIndex = index;
  }
}) {
  Column() {
    Text(`当前选中: ${this.basicTabs[this.basicIndex]}`)
  }
  .width("100%")
  .height(120)
  .justifyContent(FlexAlign.Center)
}

两个选项卡

支持仅两个选项卡的切换效果。

点我查看代码

@Local twoTabIndex: number = 0;
twoTabs: string[] = ["左侧", "右侧"];

TnSwitchTab({
  modelValue: this.twoTabIndex,
  tabs: this.twoTabs,
  onChange: (index: number) => {
    this.twoTabIndex = index;
  }
}) {
  Column() {
    Text(`当前选中: ${this.twoTabs[this.twoTabIndex]}`)
  }
  .width("100%")
  .height(100)
  .justifyContent(FlexAlign.Center)
}

多个选项卡

支持 5 个及以上选项卡的切换。

点我查看代码

@Local multiTabIndex: number = 0;
multiTabs: string[] = ["首页", "分类", "发现", "购物车", "我的"];

TnSwitchTab({
  modelValue: this.multiTabIndex,
  tabs: this.multiTabs,
  onChange: (index: number) => {
    this.multiTabIndex = index;
  }
}) {
  Column() {
    Text(`当前选中: ${this.multiTabs[this.multiTabIndex]}`)
  }
  .width("100%")
  .height(100)
  .justifyContent(FlexAlign.Center)
}

自定义颜色

通过 activeBgColor、inactiveBgColor、activeTextColor、inactiveTextColor 属性自定义选项卡的背景色和文字颜色。

点我查看代码

@Local colorIndex: number = 0;
colorTabs: string[] = ["推荐", "热门", "最新"];

TnSwitchTab({
  modelValue: this.colorIndex,
  tabs: this.colorTabs,
  inactiveBgColor: getThemeColorLight(this.baseStyle, "success"),
  activeBgColor: $r("app.color.tn_color_white"),
  inactiveTextColor: $r("app.color.tn_color_orange_dark"),
  activeTextColor: getThemeColor(this.baseStyle, "success"),
  onChange: (index: number) => {
    this.colorIndex = index;
  }
}) {
  Column() {
    Text(`当前选中: ${this.colorTabs[this.colorIndex]}`)
  }
  .width("100%")
  .height(100)
  .justifyContent(FlexAlign.Center)
}

自定义背景色

激活项使用主题实色，未激活项使用主题浅色，实现整体色调统一的效果。

点我查看代码

@Local bgColorIndex: number = 0;
bgColorTabs: string[] = ["全部", "进行中", "已完成"];

TnSwitchTab({
  modelValue: this.bgColorIndex,
  tabs: this.bgColorTabs,
  inactiveBgColor: getThemeColorLight(this.baseStyle, "warning"),
  activeBgColor: getThemeColor(this.baseStyle, "warning"),
  inactiveTextColor: getThemeColor(this.baseStyle, "warning"),
  activeTextColor: $r("app.color.tn_color_white"),
  onChange: (index: number) => {
    this.bgColorIndex = index;
  }
}) {
  Column() {
    Text(`当前选中: ${this.bgColorTabs[this.bgColorIndex]}`)
      .fontColor($r("app.color.tn_color_white"))
  }
  .width("100%")
  .height(100)
  .justifyContent(FlexAlign.Center)
  .backgroundColor(getThemeColor(this.baseStyle, "warning"))
}

禁用状态

设置 disabled 属性后，选项卡无法切换。

点我查看代码

@Local disabledIndex: number = 1;
disabledTabs: string[] = ["选项A", "选项B", "选项C"];

TnSwitchTab({
  modelValue: this.disabledIndex,
  tabs: this.disabledTabs,
  disabled: true,
  onChange: (index: number) => {
    this.disabledIndex = index;
  }
}) {
  Column() {
    Text(`当前固定在: ${this.disabledTabs[this.disabledIndex]}`)
    Text("(禁用状态，无法切换)")
  }
  .width("100%")
  .height(100)
  .justifyContent(FlexAlign.Center)
}

API

Props

参数	说明	类型	默认值
modelValue	当前激活的选项卡索引	number	0
tabs	选项卡标签数组	string[]	[]
disabled	是否禁用切换	boolean	false
inactiveBgColor	非激活选项卡背景色	ResourceColor	主题浅色（primary light）
activeBgColor	激活选项卡背景色	ResourceColor	白色
inactiveTextColor	非激活选项卡文字颜色	ResourceColor	主要文字色
activeTextColor	激活选项卡文字颜色	ResourceColor	主要文字色

Slots

名称	说明
default	选项卡内容区域，通过尾随闭包传入

Events

事件名	说明	回调参数
onChange	选项卡切换时触发	(index: number) => void