tabs

Signed-off-by: Ntengfan66 <tengfan3@huawei.com>

zh-cn/application-dev/reference/arkui-ts/ts-container-tabcontent.md

@@ -75,6 +75,7 @@ SubTabBarStyle的静态构造函数。
 | selectedMode<sup>10+</sup> | [SelectedMode](#selectedmode10枚举说明)   | 设置选中子页签的显示方式。<br />默认值：SelectedMode.INDICATOR |
 | board<sup>10+</sup> | [BoardStyle](#boardstyle10对象说明)   | 设置选中子页签的背板风格。 |
 | labelStyle<sup>10+</sup> | [LabelStyle](#labelstyle10对象说明) | 设置子页签的label文本和字体的样式。 |
+| padding<sup>10+</sup> | [Padding](ts-types.md#padding) \| [Dimension](ts-types.md#dimension10) | 设置子页签的内边距属性（不支持百分比设置）。使用Dimension时，四个方向内边距同时生效。<br/>默认值：{left:8.0vp,right:8.0vp,top:17.0vp,bottom:18.0vp} |
 
 ## IndicatorStyle<sup>10+</sup>对象说明
 
@@ -107,7 +108,7 @@ SubTabBarStyle的静态构造函数。
 | minFontSize          | number \| [ResourceStr](ts-types.md#resourcestr)             | 否   | 设置Label文本最小显示字号（不支持百分比设置）。需配合maxFontSize以及maxLines或布局大小限制使用。自适应文本大小生效后，font.size不生效。默认值是0.0fp。|
 | maxFontSize          | number \| [ResourceStr](ts-types.md#resourcestr)             | 否   | 设置Label文本最大显示字号（不支持百分比设置）。需配合minFontSize以及maxLines或布局大小限制使用。自适应文本大小生效后，font.size不生效。默认值是0.0fp。||
 | heightAdaptivePolicy | [TextHeightAdaptivePolicy](ts-appendix-enums.md#textheightadaptivepolicy10) | 否   | 设置Label文本自适应高度的方式。默认值是最大行数优先。                              |
-| font                 | [Font](ts-types.md#font)                                     | 否   | 设置Label文本字体样式。默认值是字体大小16.0fp、字体类型HarmonyOS Sans，字体风格正常，字重正常。      |
+| font                 | [Font](ts-types.md#font)                                     | 否   | 设置Label文本字体样式。<br/>当页签为子页签时，默认值是字体大小16.0fp、字体类型'HarmonyOS Sans'，字体风格正常，字重正常。<br/>当页签为底部页签时，默认值是字体大小10.0fp、字体类型'HarmonyOS Sans'，字体风格正常，字重中等。      |
 
 ## BottomTabBarStyle<sup>9+</sup>
 
@@ -138,6 +139,27 @@ BottomTabBarStyle的静态构造函数。
 | icon | [ResourceStr](ts-types.md#resourcestr) | 是 | 页签内的图片内容。 |
 | text | [ResourceStr](ts-types.md#resourcestr) | 是 | 页签内的文字内容。 |
 
+### 属性
+
+支持以下属性：
+
+| 名称         | 参数类型                                                     | 描述                                                         |
+| ------------ | ------------------------------------------------------------ | ------------------------------------------------------------ |
+| padding<sup>10+</sup> | [Padding](ts-types.md#padding) \| [Dimension](ts-types.md#dimension10) | 设置底部页签的内边距属性（不支持百分比设置）。使用Dimension时，四个方向内边距同时生效。<br/>默认值：{left:4.0vp,right:4.0vp,top:0.0vp,bottom:0.0vp} |
+| verticalAlign<sup>10+</sup> |  [VerticalAlign](ts-appendix-enums.md#verticalalign) | 设置底部页签的图片、文字在垂直方向上的对齐格式。<br/>默认值：VerticalAlign.Center |
+| layoutMode<sup>10+</sup> |  [LayoutMode](#layoutmode10枚举说明) | 设置底部页签的图片、文字排布的方式，具体参照LayoutMode枚举。<br/>默认值：LayoutMode.VERTICAL |
+| symmetricExtensible<sup>10+</sup> |  boolean | 设置底部页签的图片、文字是否可以对称借左右底部页签的空余位置中的最小值，仅fixed水平模式下在底部页签之间有效。<br/>默认值：false |
+| labelStyle<sup>10+</sup> | [LabelStyle](#labelstyle10对象说明) | 设置子页签的label文本和字体的样式。 |
+
+## LayoutMode<sup>10+</sup>枚举说明
+
+| 名称         | 描述                                       |
+| ----------  | ---------------------------------------- |
+| AUTO        | 若页签宽度大于104vp，页签内容为左右排布，否则页签内容为上下排布。仅TabBar为垂直模式或Fixed水平模式时有效。 |
+| VERTICAL    | 页签内容上下排布。 |
+| HORIZONAL   | 页签内容左右排布。 |
+
+
 ## 示例
 
 示例1：
@@ -686,3 +708,109 @@ struct TabsTextOverflow {
 ```
 
 ![tabContent4](figures/tabContent4.png)
+
+### 示例6
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct TabContentExample6 {
+  private controller: TabsController = new TabsController()
+  @State text: string = "2"
+  @State tabPadding: number = 0;
+  @State symmetricExtensible: boolean = false;
+  @State layoutMode: LayoutMode = LayoutMode.VERTICAL;
+  @State verticalAlign: VerticalAlign = VerticalAlign.Center;
+
+
+  build() {
+    Column() {
+      Row() {
+        Button("padding+10 " + this.tabPadding).width('47%').height(50).margin({ top: 5 })
+          .onClick((event: ClickEvent) => {
+            this.tabPadding += 10
+          }).margin({ right:'6%', bottom:'12vp'})
+        Button("padding-10 " + this.tabPadding).width('47%').height(50).margin({ top: 5 })
+          .onClick((event: ClickEvent) => {
+            this.tabPadding -= 10
+          }).margin({bottom:'12vp'})
+      }
+      Row() {
+        Button("文本增加 ").width('47%').height(50).margin({ top: 5 })
+          .onClick((event: ClickEvent) => {
+            this.text += '文本增加'
+          }).margin({ right:'6%', bottom:'12vp'})
+        Button("文本重置").width('47%').height(50).margin({ top: 5 })
+          .onClick((event: ClickEvent) => {
+            this.text = "2"
+          }).margin({bottom:'12vp'})
+      }
+      Row() {
+        Button("symmetricExtensible改变 " + this.symmetricExtensible).width('100%').height(50).margin({ top: 5 })
+          .onClick((event: ClickEvent) => {
+            this.symmetricExtensible = !this.symmetricExtensible
+          }).margin({bottom:'12vp'})
+      }
+      Row() {
+        Button("layoutMode垂直 ").width('47%').height(50).margin({ top: 5 })
+          .onClick((event: ClickEvent) => {
+            this.layoutMode = LayoutMode.VERTICAL;
+          }).margin({ right:'6%', bottom:'12vp'})
+        Button("layoutMode水平 ").width('47%').height(50).margin({ top: 5 })
+          .onClick((event: ClickEvent) => {
+            this.layoutMode = LayoutMode.HORIZONTAL;
+          }).margin({bottom:'12vp'})
+      }
+      Row() {
+        Button("verticalAlign朝上").width('100%').height(50).margin({ top: 5 })
+          .onClick((event: ClickEvent) => {
+            this.verticalAlign = VerticalAlign.Top;
+          }).margin({bottom:'12vp'})
+      }
+      Row() {
+        Button("verticalAlign居中").width('100%').height(50).margin({ top: 5 })
+          .onClick((event: ClickEvent) => {
+            this.verticalAlign = VerticalAlign.Center;
+          }).margin({bottom:'12vp'})
+      }
+      Row() {
+        Button("verticalAlign朝下").width('100%').height(50).margin({ top: 5 })
+          .onClick((event: ClickEvent) => {
+            this.verticalAlign = VerticalAlign.Bottom;
+          }).margin({bottom:'12vp'})
+      }
+
+
+      Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
+        TabContent() {
+          Column().width('100%').height('100%').backgroundColor(Color.Pink)
+        }.tabBar(BottomTabBarStyle.of($r("sys.media.ohos_app_icon"), "1"))
+
+        TabContent() {
+          Column().width('100%').height('100%').backgroundColor(Color.Green)
+        }.tabBar(BottomTabBarStyle.of($r("sys.media.ohos_app_icon"), this.text)
+          .padding(this.tabPadding)
+          .verticalAlign(this.verticalAlign)
+          .layoutMode(this.layoutMode)
+          .symmetricExtensible(this.symmetricExtensible))
+
+        TabContent() {
+          Column().width('100%').height('100%').backgroundColor(Color.Blue)
+        }.tabBar(BottomTabBarStyle.of($r("sys.media.ohos_app_icon"), "3"))
+      }
+      .animationDuration(300)
+      .height('60%')
+      .backgroundColor(0xf1f3f5)
+      .barMode(BarMode.Fixed)
+    }
+    .width('100%')
+    .height(500)
+    .margin({ top: 5 })
+    .padding('24vp')
+  }
+}
+
+```
+
+![tabContent4](figures/tabContent5.gif)
\ No newline at end of file

zh-cn/application-dev/reference/arkui-ts/ts-container-tabs.md

@@ -40,7 +40,7 @@ Tabs(value?: {barPosition?: BarPosition, index?: number, controller?: [TabsContr
 | -------------------------------- | ---------------------------------------- | ---------------------------------------- |
 | vertical                         | boolean                                  | 设置为false是为横向Tabs，设置为true时为纵向Tabs。<br/>默认值：false |
 | scrollable                       | boolean                                  | 设置为true时可以通过滑动页面进行页面切换，为false时不可滑动切换页面。<br/>默认值：true |
-| barMode                          | BarMode                                  | TabBar布局模式，具体描述见BarMode枚举说明。<br/>默认值：BarMode.Fixed |
+| barMode                          | [BarMode](#barmode枚举说明),[ScrollableBarModeOptions](#scrollablebarmodeoptions10对象说明) | TabBar布局模式，BarMode为必选项，ScrollableBarModeOptions为可选项，具体描述见BarMode枚举说明、ScrollableBarModeOptions对象说明。从API version 10开始，支持ScrollableBarModeOptions参数。其中ScrollableBarModeOptions参数仅Scrollable模式下有效，非必填参数。<br/>默认值：BarMode.Fixed |
 | barWidth                         | number&nbsp;\|&nbsp;Length<sup>8+</sup>  | TabBar的宽度值。<br/>默认值：<br/>未设置带样式的TabBar且vertical属性为false时，默认值为Tabs的宽度。<br/>未设置带样式的TabBar且vertical属性为true时，默认值为56vp。<br/>设置SubTabbarStyle样式且vertical属性为false时，默认值为Tabs的宽度。<br/>设置SubTabbarStyle样式且vertical属性为true时，默认值为56vp。<br/>设置BottomTabbarStyle样式且vertical属性为true时，默认值为96vp。<br/>设置BottomTabbarStyle样式且vertical属性为false时，默认值为Tabs的宽度。<br/>**说明：** <br/>设置为小于0或大于Tabs宽度值时，按默认值显示。 |
 | barHeight                        | number&nbsp;\|&nbsp;Length<sup>8+</sup>  | TabBar的高度值。<br/>默认值：<br/>未设置带样式的TabBar且vertical属性为false时，默认值为56vp。<br/>未设置带样式的TabBar且vertical属性为true时，默认值为Tabs的高度。<br/>设置SubTabbarStyle样式且vertical属性为false时，默认值为56vp。<br/>设置SubTabbarStyle样式且vertical属性为true时，默认值为Tabs的高度。<br/>设置BottomTabbarStyle样式且vertical属性为true时，默认值为Tabs的高度。<br/>设置BottomTabbarStyle样式且vertical属性为false时，默认值为56vp。<br/>**说明：** <br/>设置为小于0或大于Tabs高度值时，按默认值显示。 |
 | animationDuration                | number                                   | TabContent滑动动画时长。不设置时，点击切换页签无动画，滑动切换有动画；设置时，点击切换和滑动切换都有动画。<br/>默认值：300 <br/>**说明：** <br/>设置为小于0或百分比时，按默认值显示。 |
@@ -48,6 +48,7 @@ Tabs(value?: {barPosition?: BarPosition, index?: number, controller?: [TabsContr
 | fadingEdge<sup>10+</sup>         | boolean                                  | 设置页签超过容器宽度时是否渐隐消失。<br />默认值：true         |
 | barOverlap<sup>10+</sup>         | boolean                                  | 设置TabBar是否背后变模糊并叠加在TabContent之上。<br />默认值：false |
 | barBackgroundColor<sup>10+</sup> | [ResourceColor](ts-types.md#resourcecolor) | 设置TabBar的背景颜色。<br />默认值：透明               |
+| barGridAlign<sup>10+</sup> | [BarGridColumnOptions](#bargridcolumnoptions10对象说明) | 以栅格化方式设置TabBar的可见区域。具体参见BarGridColumnOptions对象。仅水平模式下有效。              |
 
 ## DividerStyle<sup>10+</sup>对象说明
 
@@ -58,6 +59,23 @@ Tabs(value?: {barPosition?: BarPosition, index?: number, controller?: [TabsContr
 | startMargin | [Length](ts-types.md#length)             | 否    | 分割线与侧边栏顶端的距离（不支持百分比设置）。<br/>默认值：0.0<br/>单位：vp |
 | endMargin   | [Length](ts-types.md#length)             | 否    | 分割线与侧边栏底端的距离（不支持百分比设置）。<br/>默认值：0.0<br/>单位：vp |
 
+## BarGridColumnOptions<sup>10+</sup>对象说明
+
+| 名称          | 参数类型                                     | 必填   | 描述                                       |
+| ----------- | ---------------------------------------- | ---- | ---------------------------------------- |
+| margin | [Dimension](ts-types.md#dimension10)             | 否    | 网格模式下的column边距（不支持百分比设置）。<br/>默认值:24.0<br/>单位：vp                        |
+| gutter      | [Dimension](ts-types.md#dimension10) | 否    | 网格模式下的column间隔（不支持百分比设置）。<br/>默认值:24.0<br/>单位：vp                     |
+| sm | number            | 否    | 小屏下，页签占用的columns数量，必须是非负偶数。小屏为大于等于320vp但小于600vp。<br/>默认值为-1，代表页签占用TabBar全部宽度。 |
+| md   | number          | 否    | 中屏下，页签占用的columns数量，必须是非负偶数。中屏为大于等于600vp但小于800vp。<br/>默认值为-1，代表页签占用TabBar全部宽度。 |
+| lg   | number           | 否    | 大屏下，页签占用的columns数量，必须是非负偶数。大屏为大于等于840vp但小于1024vp。<br/>默认值为-1，代表页签占用TabBar全部宽度。 |
+
+## ScrollableBarModeOptions<sup>10+</sup>对象说明
+
+| 名称          | 参数类型                                     | 必填   | 描述                                       |
+| ----------- | ---------------------------------------- | ---- | ---------------------------------------- |
+| margin | [Dimension](ts-types.md#dimension10)          | 否    | Scrollable模式下的TabBar的左右边距（不支持百分比设置）。<br/>默认值：0.0<br/>单位：vp                    |
+| nonScrollableLayoutStyle      | [LayoutStyle](#layoutstyle10枚举说明) | 否    | Scrollable模式下不滚动时的页签排布方式。<br/>默认值：LayoutStyle.ALWAYS_CENTER           |
+
 ## BarMode枚举说明
 
 | 名称         | 描述                                       |
@@ -65,6 +83,14 @@ Tabs(value?: {barPosition?: BarPosition, index?: number, controller?: [TabsContr
 | Scrollable | 每一个TabBar均使用实际布局宽度，超过总长度（横向Tabs的barWidth，纵向Tabs的barHeight）后可滑动。 |
 | Fixed      | 所有TabBar平均分配barWidth宽度（纵向时平均分配barHeight高度）。 |
 
+## LayoutStyle<sup>10+</sup>枚举说明
+
+| 名称         | 描述                                       |
+| ---------- | ---------------------------------------- |
+| ALWAYS_CENTER | 当页签内容超过TabBar宽度时，TabBar可滚动。<br/>当页签内容不超过TabBar宽度时，TabBar不可滚动，页签紧凑居中。|
+| ALWAYS_AVERAGE_SPLITE      | 当页签内容超过TabBar宽度时，TabBar可滚动。<br/>当页签内容不超过TabBar宽度时，TabBar不可滚动，且所有页签平均分配TabBar宽度。<br/>仅水平模式下有效，否则视为LayoutStyle.ALWAYS_CENTER。|
+| SPACE_BETWEEN_OR_CENTER      | 当页签内容超过TabBar宽度时，TabBar可滚动。<br/>当页签内容不超过TabBar宽度但超过TabBar宽度一半时，TabBar不可滚动，页签紧凑居中。<br/>当页签内容不超过TabBar宽度一半时，TabBar不可滚动，保证页签居中排列在TabBar宽度一半，且间距相同。|
+
 ## 事件
 
 除支持[通用事件](ts-universal-events-click.md)外，还支持以下事件：
@@ -72,6 +98,7 @@ Tabs(value?: {barPosition?: BarPosition, index?: number, controller?: [TabsContr
 | 名称                                       | 功能描述                                     |
 | ---------------------------------------- | ---------------------------------------- |
 | onChange(event:&nbsp;(index:&nbsp;number)&nbsp;=&gt;&nbsp;void) | Tab页签切换后触发的事件。<br>-&nbsp;index：当前显示的index索引，索引从0开始计算。<br/>触发该事件的条件：<br/>1、TabContent支持滑动时，组件触发滑动时触发。<br/>2、通过[控制器](#tabscontroller)API接口调用。<br/>3、通过[状态变量](../../quick-start/arkts-state.md)构造的属性值进行修改。<br/>4、通过页签处点击触发。 |
+| onTabBarClick(event:&nbsp;(index:&nbsp;number)&nbsp;=&gt;&nbsp;void)<sup>10+</sup> | Tab页签点击后触发的事件。<br>-&nbsp;index：被点击的index索引，索引从0开始计算。<br/>触发该事件的条件：<br/>通过页签处点击触发。 |
 
 ## TabsController
 
@@ -422,3 +449,168 @@ struct barBackgroundColorTest {
 ```
 
 ![tabs5](figures/tabs5.gif)
+
+
+### 示例5
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct TabsExample5 {
+  private controller: TabsController = new TabsController()
+  @State gridMargin: number = 10
+  @State gridGutter: number = 10
+  @State sm: number = -2
+  @State clickedContent: string = "";
+
+  build() {
+    Column() {
+      Row() {
+        Button("gridMargin+10 " + this.gridMargin).width('47%').height(50).margin({ top: 5 })
+          .onClick((event: ClickEvent) => {
+            this.gridMargin += 10
+          }).margin({ right:'6%', bottom:'12vp'})
+        Button("gridMargin-10 " + this.gridMargin).width('47%').height(50).margin({ top: 5 })
+          .onClick((event: ClickEvent) => {
+            this.gridMargin -= 10
+          }).margin({bottom:'12vp'})
+      }
+      Row() {
+        Button("gridGutter+10 " + this.gridGutter).width('47%').height(50).margin({ top: 5 })
+          .onClick((event: ClickEvent) => {
+            this.gridGutter += 10
+          }).margin({ right:'6%', bottom:'12vp'})
+        Button("gridGutter-10 " + this.gridGutter).width('47%').height(50).margin({ top: 5 })
+          .onClick((event: ClickEvent) => {
+            this.gridGutter -= 10
+          }).margin({bottom:'12vp'})
+      }
+      Row() {
+        Button("sm+2 "+this.sm).width('47%').height(50).margin({ top: 5 })
+          .onClick((event: ClickEvent) => {
+            this.sm += 2
+          }).margin({ right:'6%'})
+        Button("sm-2 "+this.sm).width('47%').height(50).margin({ top: 5 })
+          .onClick((event: ClickEvent) => {
+            this.sm -= 2
+          })
+      }
+      Text("点击内容:"+this.clickedContent).width('100%').height(200).margin({ top: 5 })
+
+
+      Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
+        TabContent() {
+          Column().width('100%').height('100%').backgroundColor(Color.Pink)
+        }.tabBar(BottomTabBarStyle.of($r("sys.media.ohos_app_icon"), "1"))
+
+        TabContent() {
+          Column().width('100%').height('100%').backgroundColor(Color.Green)
+        }.tabBar(BottomTabBarStyle.of($r("sys.media.ohos_app_icon"), "2"))
+
+        TabContent() {
+          Column().width('100%').height('100%').backgroundColor(Color.Blue)
+        }.tabBar(BottomTabBarStyle.of($r("sys.media.ohos_app_icon"), "3"))
+      }
+      .animationDuration(300)
+      .height('60%')
+      .barGridAlign({ sm: this.sm, margin: this.gridMargin, gutter: this.gridGutter })
+      .backgroundColor(0xf1f3f5)
+      .onTabBarClick((index:number)=>{
+        this.clickedContent += "now index " + index + " is clicked\n";
+      })
+    }
+    .width('100%')
+    .height(500)
+    .margin({ top: 5 })
+    .padding('24vp')
+  }
+}
+
+```
+
+![tabs5](figures/tabs6.gif)
+
+### 示例6
+
+```ts
+// xxx.ets
+@Entry
+@Component
+struct TabsExample6 {
+  private controller: TabsController = new TabsController()
+  @State scrollMargin:number = 0
+  @State layoutStyle: LayoutStyle = LayoutStyle.ALWAYS_CENTER
+  @State text: string = "文本"
+
+
+  build() {
+    Column() {
+      Row() {
+        Button("scrollMargin+10 " + this.scrollMargin).width('47%').height(50).margin({ top: 5 })
+          .onClick((event: ClickEvent) => {
+            this.scrollMargin += 10
+          }).margin({ right:'6%', bottom:'12vp'})
+        Button("scrollMargin-10 " + this.scrollMargin).width('47%').height(50).margin({ top: 5 })
+          .onClick((event: ClickEvent) => {
+            this.scrollMargin -= 10
+          }).margin({bottom:'12vp'})
+      }
+      Row() {
+        Button("文本增加 ").width('47%').height(50).margin({ top: 5 })
+          .onClick((event: ClickEvent) => {
+            this.text += '文本增加'
+          }).margin({ right:'6%', bottom:'12vp'})
+        Button("文本重置").width('47%').height(50).margin({ top: 5 })
+          .onClick((event: ClickEvent) => {
+            this.text = "文本"
+          }).margin({bottom:'12vp'})
+      }
+      Row() {
+        Button("layoutStyle.ALWAYS_CENTER").width('100%').height(50).margin({ top: 5 }).fontSize(15)
+          .onClick((event: ClickEvent) => {
+            this.layoutStyle = LayoutStyle.ALWAYS_CENTER;
+          }).margin({bottom:'12vp'})
+      }
+      Row() {
+        Button("layoutStyle.ALWAYS_AVERAGE_SPLIT").width('100%').height(50).margin({ top: 5 }).fontSize(15)
+          .onClick((event: ClickEvent) => {
+            this.layoutStyle = LayoutStyle.ALWAYS_AVERAGE_SPLIT;
+          }).margin({bottom:'12vp'})
+      }
+      Row() {
+        Button("layoutStyle.SPACE_BETWEEN_OR_CENTER").width('100%').height(50).margin({ top: 5 }).fontSize(15)
+          .onClick((event: ClickEvent) => {
+            this.layoutStyle = LayoutStyle.SPACE_BETWEEN_OR_CENTER;
+          }).margin({bottom:'12vp'})
+      }
+
+
+      Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
+        TabContent() {
+          Column().width('100%').height('100%').backgroundColor(Color.Pink)
+        }.tabBar(SubTabBarStyle.of(this.text))
+
+        TabContent() {
+          Column().width('100%').height('100%').backgroundColor(Color.Green)
+        }.tabBar(SubTabBarStyle.of(this.text))
+
+        TabContent() {
+          Column().width('100%').height('100%').backgroundColor(Color.Blue)
+        }.tabBar(SubTabBarStyle.of(this.text))
+      }
+      .animationDuration(300)
+      .height('60%')
+      .backgroundColor(0xf1f3f5)
+      .barMode(BarMode.Scrollable,{margin:this.scrollMargin, nonScrollableLayoutStyle:this.layoutStyle})
+    }
+    .width('100%')
+    .height(500)
+    .margin({ top: 5 })
+    .padding('24vp')
+  }
+}
+
+```
+
+![tabs5](figures/tabs7.gif)
\ No newline at end of file