From 8055027712ff67ea30f3068d181b3efe1452c181 Mon Sep 17 00:00:00 2001
From: zhouchaobo <zhouchaobo@huawei.com>
Date: Thu, 9 Feb 2023 18:20:20 +0800
Subject: [PATCH] TabContent add two types of tabBar

Signed-off-by: zhouchaobo <zhouchaobo@huawei.com>
---
 .../arkui-ts/figures/TabBarStyle.jpeg         | Bin 0 -> 22263 bytes
 .../arkui-ts/ts-container-tabcontent.md       | 133 +++++++++++++++++-
 .../reference/arkui-ts/ts-container-tabs.md   |   2 +-
 3 files changed, 133 insertions(+), 2 deletions(-)
 create mode 100644 zh-cn/application-dev/reference/arkui-ts/figures/TabBarStyle.jpeg

diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/TabBarStyle.jpeg b/zh-cn/application-dev/reference/arkui-ts/figures/TabBarStyle.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..870c385e4600b1ddc9f92fd929be59022c3ef781
GIT binary patch
literal 22263
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

literal 0
HcmV?d00001

diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-tabcontent.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-tabcontent.md
index 1c61f55bd7..8a2612b58f 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-container-tabcontent.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-tabcontent.md
@@ -24,12 +24,45 @@ TabContent()
 | 名称 | 参数类型 | 描述 |
 | -------- | -------- | -------- |
 | tabBar | string&nbsp;\|&nbsp;Resource&nbsp;\|&nbsp;{<br/>icon?:&nbsp;string&nbsp;\|&nbsp;Resource,<br/>text?:&nbsp;string&nbsp;\|&nbsp;Resource<br/>}<br/>\|&nbsp;[CustomBuilder](ts-types.md)<sup>8+</sup> | 设置TabBar上显示内容。<br/>CustomBuilder:&nbsp;构造器，内部可以传入组件（API8版本以上适用）。<br/>>&nbsp;&nbsp;**说明：**<br/>>&nbsp;如果icon采用svg格式图源，则要求svg图源删除其自有宽高属性值。如采用带有自有宽高属性的svg图源，icon大小则是svg本身内置的宽高属性值大小。 |
+| tabBar<sup>9+</sup> | [SubTabBarStyle](#subtabbarstyle) \| [BottomTabBarStyle](#bottomtabbarstyle) | 设置TabBar上显示内容。<br/>SubTabBarStyle:&nbsp;子页签样式，参数为文字。<br/>BottomTabBarStyle:&nbsp;底部页签和侧边页签样式，参数为文字和图片。 |
 
 >  **说明：**
 > - TabContent组件不支持设置通用宽度属性，其宽度默认撑满Tabs父组件。
 > - TabContent组件不支持设置通用高度属性，其高度由Tabs父组件高度与TabBar组件高度决定。
 > - TabContent组件不支持[触摸热区设置](ts-universal-attributes-touch-target.md)。
 
+## SubTabBarStyle<sup>9+</sup>
+
+子页签样式。
+
+### constructor<sup>9+</sup>
+
+constructor(content: string | Resource)
+
+SubTabBarStyle的构造函数。
+
+**参数：**
+
+| 参数名 | 参数类型         | 必填 | 参数描述 |
+| -------- | -------- | -------- | -------- |
+| content | string \| [Resource](ts-types.md#resource) | 是 | 页签内的文字内容。 |
+
+## BottomTabBarStyle<sup>9+</sup>
+
+底部页签和侧边页签样式。
+
+### constructor<sup>9+</sup>
+
+constructor(icon: string | Resource, text: string | Resource)
+
+BottomTabBarStyle的构造函数。
+
+**参数：**
+
+| 参数名 | 参数类型         | 必填 | 参数描述 |
+| -------- | -------- | -------- | -------- |
+| icon | string \| [Resource](ts-types.md#resource) | 是 | 页签内的图片内容。 |
+| text | string \| [Resource](ts-types.md#resource) | 是 | 页签内的文字内容。 |
 
 ## 示例
 
@@ -193,4 +226,102 @@ struct TabContentExample {
 }
 ```
 
-![tabContent](figures/tabContent2.gif)
\ No newline at end of file
+![tabContent](figures/tabContent2.gif)
+
+示例3：
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct TabBarStyleExample {
+  build() {
+    Column({ space: 5 }) {
+      Text("子页签样式")
+      Column() {
+        Tabs({ barPosition: BarPosition.Start }) {
+          TabContent() {
+            Column().width('100%').height('100%').backgroundColor(Color.Pink)
+          }.tabBar(new SubTabBarStyle('Pink'))
+
+          TabContent() {
+            Column().width('100%').height('100%').backgroundColor(Color.Yellow)
+          }.tabBar(new SubTabBarStyle('Yellow'))
+
+          TabContent() {
+            Column().width('100%').height('100%').backgroundColor(Color.Blue)
+          }.tabBar(new SubTabBarStyle('Blue'))
+
+          TabContent() {
+            Column().width('100%').height('100%').backgroundColor(Color.Green)
+          }.tabBar(new SubTabBarStyle('Green'))
+        }
+        .vertical(false)
+        .scrollable(true)
+        .barMode(BarMode.Fixed)
+        .onChange((index: number) => {
+          console.info(index.toString())
+        })
+        .width('100%')
+        .backgroundColor(0xF1F3F5)
+      }.width('100%').height(200)
+      Text("底部页签样式")
+      Column() {
+        Tabs({ barPosition: BarPosition.End }) {
+          TabContent() {
+            Column().width('100%').height('100%').backgroundColor(Color.Pink)
+          }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'pink'))
+
+          TabContent() {
+            Column().width('100%').height('100%').backgroundColor(Color.Yellow)
+          }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Yellow'))
+
+          TabContent() {
+            Column().width('100%').height('100%').backgroundColor(Color.Blue)
+          }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Blue'))
+
+          TabContent() {
+            Column().width('100%').height('100%').backgroundColor(Color.Green)
+          }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Green'))
+        }
+        .vertical(false)
+        .scrollable(true)
+        .barMode(BarMode.Fixed)
+        .onChange((index: number) => {
+          console.info(index.toString())
+        })
+        .width('100%')
+        .backgroundColor(0xF1F3F5)
+      }.width('100%').height(200)
+      Text("侧边页签样式")
+      Column() {
+        Tabs({ barPosition: BarPosition.Start }) {
+          TabContent() {
+            Column().width('100%').height('100%').backgroundColor(Color.Pink)
+          }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'pink'))
+
+          TabContent() {
+            Column().width('100%').height('100%').backgroundColor(Color.Yellow)
+          }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Yellow'))
+
+          TabContent() {
+            Column().width('100%').height('100%').backgroundColor(Color.Blue)
+          }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Blue'))
+
+          TabContent() {
+            Column().width('100%').height('100%').backgroundColor(Color.Green)
+          }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Green'))
+        }
+        .vertical(true).scrollable(true).barMode(BarMode.Fixed)
+        .onChange((index: number) => {
+          console.info(index.toString())
+        })
+        .width('100%')
+        .backgroundColor(0xF1F3F5)
+      }.width('100%').height(400)
+    }
+  }
+}
+```
+
+![tabbarStyle](figures/TabBarStyle.jpeg)
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-tabs.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-tabs.md
index c90880b34b..47d0b607cd 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-container-tabs.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-tabs.md
@@ -43,7 +43,7 @@ Tabs(value?: {barPosition?: BarPosition, index?: number, controller?: [TabsContr
 | barMode           | BarMode | TabBar布局模式，具体描述见BarMode枚举说明。<br/>默认值：BarMode.Fixed |
 | barWidth          | number&nbsp;\|&nbsp;Length<sup>8+</sup>  | TabBar的宽度值。     |
 | barHeight         | number&nbsp;\|&nbsp;Length<sup>8+</sup>  | TabBar的高度值。     |
-| animationDuration | number | TabContent滑动动画时长。<br/>默认值：200 |
+| animationDuration | number | TabContent滑动动画时长。不设置时，点击切换页签无动画，滑动切换有动画；设置时，点击切换和滑动切换都有动画。<br/>默认值：200 |
 
 ## BarMode枚举说明
 
-- 
GitLab