【鸿蒙实战开发】ArkUI-tabs组件开发指导

最新推荐文章于 2025-05-06 14:58:13 发布

原创

最新推荐文章于 2025-05-06 14:58:13 发布 · 1.1k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #华为 #ui #鸿蒙 #android

tabs是一种常见的界面导航结构。通过页签容器，用户可以快捷地访问应用的不同模块。具体用法请参考tabs API。

创建tabs

在pages/index目录下的hml文件中创建一个tabs组件。

<!-- xxx.hml -->
<div class="container">
    <tabs>
        <tab-bar>
            <text>item1</text>
            <text>item2</text>
        </tab-bar>
        <tab-content class="tabContent">
            <div class="text">
                <text>content1</text>
            </div>
            <div class="text">
                <text>content2</text>
            </div>
        </tab-content>
    </tabs>
</div>

/* xxx.css */
.container {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #F1F3F5;
}
.tabContent{
  width: 100%;
  height: 100%;
}
.text{
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}

0000000000011111111.20240813092131.88308297269327017404604310929746.gif

设置样式

设置tabs背景色及边框和tab-content布局。

<!-- xxx.hml -->
<div class="container">
  <tabs class="tabs">
    <tab-bar class="tabBar">
      <text class="tabBarItem">item1</text>
      <text class="tabBarItem">item2</text>
    </tab-bar>
    <tab-content class="tabContent">
      <div class="tabContent">
        <text>content1</text>
      </div>
      <div class="tabContent" >
        <text>content2</text>
      </div>
    </tab-content>
  </tabs>
</div>