HarmonyOS ArkUI容器类组件-Tabs组件(Tabs、TabContent)

ArkUI开发框架提供了一种可以通过页签进行内容视图切换的容器组件,每个页签对应一个内容视图的容器组件 Tabs ,它允许包含子组件且子组件只能是 TabContent ,本节笔者介绍一下 Tabs 的简单使用。

Tabs定义介绍

interface TabsInterface {
  (value?: { barPosition?: BarPosition; index?: number; controller?: TabsController }): TabsAttribute;
}

declare enum BarPosition {
  Start,
  End,
}
  • barPosition:指定页签位置来创建 Tabs 容器组件, BarPosition 定义了以下两种类型:
    • Start(默认值):当 vertical 属性方法设置为 true 时,页签位于容器左侧; vertical 属性方法设置为 false 时,页签位于容器顶部。
    • Endvertical 属性方法设置为 true 时,页签位于容器右侧; vertical 属性方法设置为 false 时,页签位于容器底部。
  • index:指定初次初始页签索引,默认值为 0
  • controller:设置 Tabs 控制器。

简单样例如下所示:

@Entry @Component struct SideBarContainerTest {

  private controller: TabsController = new TabsController();

  build() {
    Column() {
      Tabs({// Tabs不设置vertical属性时,默认上下排版
        barPosition: BarPosition.Start,
        controller: this.controller
      }) {
        TabContent() {
          Column()
            .width('100%')
            .height('100%')
            .backgroundColor("#aabbcc")
        }
        .size({width: "100%", height: "100%"})
        .tabBar("消息")

        TabContent() {
          Column()
            .width('100%')
            .height('100%')
            .backgroundColor("#bbccaa")
        }
        .size({width: "100%", height: "100%"})
        .tabBar("联系人")

        TabContent() {
          Column()
            .width('100%')
            .height('100%')
            .backgroundColor("#ccaabb")
        }
        .size({width: "100%", height: "100%"})
        .tabBar("动态")
      }
      .size({width: "100%", height: "100%"})
    }
    .width('100%')
    .height('100%')
    .padding(10)
  }
}

样例运行结果如下图所示:

Tabs属性介绍

declare class TabsAttribute extends CommonMethod<TabsAttribute> {
  vertical(value: boolean): TabsAttribute;
  scrollable(value: boolean): TabsAttribute;
  barMode(value: BarMode): TabsAttribute;
  barWidth(value: Length): TabsAttribute;
  barHeight(value: Length): TabsAttribute;
  animationDuration(value: number): TabsAttribute;
}
  • vertical:设置 Tab 是否为左右排列,默认为 false ,表示上下排列。

  • verti

### 如何在 Element UI `el-tabs` 组件中添加自定义样式类 为了向 `el-tabs` 或其子组件如 `el-tab-pane` 添加自定义样式类,可以通过多种方式实现: #### 方法一:直接使用原生 HTML 属性 class 可以直接在标签内指定 `class` 属性来应用全局或局部的 CSS 类。 ```html <el-tabs :class="'custom-tabs-class'" @tab-click="handleTabClick"> <el-tab-pane label="选项卡1" name="first">内容1</el-tab-pane> <el-tab-pane label="选项卡2" name="second">内容2</el-tab-pane> </el-tabs> ``` 此方法适用于希望整个 tabs 容器拥有特定样式的场景[^1]。 #### 方法二:利用 scoped slots 和具名插槽 如果需要更细粒度地控制每个 tab pane 的样式,则可以采用作用域插槽的方式,在模板内部动态设置样式类。 ```html <el-tabs @tab-click="handleTabClick"> <!-- 使用具名插槽 'pane' 来覆盖默认的内容区域 --> <el-tab-pane v-for="(item,index) in items" :key="index" :label="item.label" :name="item.name"> <template #default="{ isActive }"> <div :class="[isActive ? 'active-content-style':'content-style']">{{ item.content }}</div> </template> </el-tab-pane> </el-tabs> ``` 这种方法允许基于某些条件(比如激活状态)改变样式,并且能够更好地分离逻辑与表现层。 #### 方法三:通过 JavaScript 动态修改 DOM 节点属性 对于更加复杂的交互需求,可以在 Vue 实例的方法里操作真实的 DOM 元素。不过这种方式通常不推荐用于简单的样式调整,因为会破坏单向数据流原则并可能引起维护困难。 ```javascript methods:{ handleTabClick(tab){ const targetEl = document.querySelector(`#${this.$refs.tabs.id} .is-active`); if(targetEl){ targetEl.classList.add('highlighted'); } } } ``` 以上三种方案可以根据实际项目的需求灵活选用。值得注意的是,当遇到性能瓶颈或其他兼容性问题时,考虑回退至稳定版本可能是解决问题的有效途径之一[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值