diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/tabContent5.gif b/zh-cn/application-dev/reference/arkui-ts/figures/tabContent5.gif new file mode 100755 index 0000000000000000000000000000000000000000..e4f040b0798d1c1c092a7010455bf32423a4b0e1 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/tabContent5.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/tabs6.gif b/zh-cn/application-dev/reference/arkui-ts/figures/tabs6.gif new file mode 100755 index 0000000000000000000000000000000000000000..45beb6e52f9e24d45780271b658ff74734ec71b7 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/tabs6.gif differ diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/tabs7.gif b/zh-cn/application-dev/reference/arkui-ts/figures/tabs7.gif new file mode 100755 index 0000000000000000000000000000000000000000..754905a57ce8d687eefb62da58925f0c31474128 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/tabs7.gif differ 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 9cfb9370daadf9a476edd194670a93a6bfa9b9fd..cfd3ae7288c5330747d7c4f8561017c43e4cc420 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 @@ -75,6 +75,7 @@ SubTabBarStyle的静态构造函数。 | selectedMode10+ | [SelectedMode](#selectedmode10枚举说明) | 设置选中子页签的显示方式。
默认值：SelectedMode.INDICATOR | | board10+ | [BoardStyle](#boardstyle10对象说明) | 设置选中子页签的背板风格。 | | labelStyle10+ | [LabelStyle](#labelstyle10对象说明) | 设置子页签的label文本和字体的样式。 | +| padding10+ | [Padding](ts-types.md#padding) \| [Dimension](ts-types.md#dimension10) | 设置子页签的内边距属性（不支持百分比设置）。使用Dimension时，四个方向内边距同时生效。
默认值：{left:8.0vp,right:8.0vp,top:17.0vp,bottom:18.0vp} | ## IndicatorStyle10+对象说明 @@ -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文本字体样式。
当页签为子页签时，默认值是字体大小16.0fp、字体类型'HarmonyOS Sans'，字体风格正常，字重正常。
当页签为底部页签时，默认值是字体大小10.0fp、字体类型'HarmonyOS Sans'，字体风格正常，字重中等。 | ## BottomTabBarStyle9+ @@ -138,6 +139,27 @@ BottomTabBarStyle的静态构造函数。 | icon | [ResourceStr](ts-types.md#resourcestr) | 是 | 页签内的图片内容。 | | text | [ResourceStr](ts-types.md#resourcestr) | 是 | 页签内的文字内容。 | +### 属性 + +支持以下属性： + +| 名称 | 参数类型 | 描述 | +| ------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | +| padding10+ | [Padding](ts-types.md#padding) \| [Dimension](ts-types.md#dimension10) | 设置底部页签的内边距属性（不支持百分比设置）。使用Dimension时，四个方向内边距同时生效。
默认值：{left:4.0vp,right:4.0vp,top:0.0vp,bottom:0.0vp} | +| verticalAlign10+ | [VerticalAlign](ts-appendix-enums.md#verticalalign) | 设置底部页签的图片、文字在垂直方向上的对齐格式。
默认值：VerticalAlign.Center | +| layoutMode10+ | [LayoutMode](#layoutmode10枚举说明) | 设置底部页签的图片、文字排布的方式，具体参照LayoutMode枚举。
默认值：LayoutMode.VERTICAL | +| symmetricExtensible10+ | boolean | 设置底部页签的图片、文字是否可以对称借左右底部页签的空余位置中的最小值，仅fixed水平模式下在底部页签之间有效。
默认值：false | +| labelStyle10+ | [LabelStyle](#labelstyle10对象说明) | 设置子页签的label文本和字体的样式。 | + +## LayoutMode10+枚举说明 + +| 名称 | 描述 | +| ---------- | ---------------------------------------- | +| AUTO | 若页签宽度大于104vp，页签内容为左右排布，否则页签内容为上下排布。仅TabBar为垂直模式或Fixed水平模式时有效。 | +| VERTICAL | 页签内容上下排布。 | +| HORIZONAL | 页签内容左右排布。 | + + ## 示例 示例1： @@ -685,4 +707,110 @@ struct TabsTextOverflow { } ``` -![tabContent4](figures/tabContent4.png) \ No newline at end of file +![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 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 f1c4f5d7121cdc140850dcdd5b3d80d7b559275f..6eb01fe7b4f62f11b17593e8acf80f4bde4df9d3 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 @@ -40,7 +40,7 @@ Tabs(value?: {barPosition?: BarPosition, index?: number, controller?: [TabsContr | -------------------------------- | ---------------------------------------- | ---------------------------------------- | | vertical | boolean | 设置为false是为横向Tabs，设置为true时为纵向Tabs。
默认值：false | | scrollable | boolean | 设置为true时可以通过滑动页面进行页面切换，为false时不可滑动切换页面。
默认值：true | -| barMode | BarMode | TabBar布局模式，具体描述见BarMode枚举说明。
默认值：BarMode.Fixed | +| barMode | [BarMode](#barmode枚举说明),[ScrollableBarModeOptions](#scrollablebarmodeoptions10对象说明) | TabBar布局模式，BarMode为必选项，ScrollableBarModeOptions为可选项，具体描述见BarMode枚举说明、ScrollableBarModeOptions对象说明。从API version 10开始，支持ScrollableBarModeOptions参数。其中ScrollableBarModeOptions参数仅Scrollable模式下有效，非必填参数。
默认值：BarMode.Fixed | | barWidth | number \| Length8+ | TabBar的宽度值。
默认值：
未设置带样式的TabBar且vertical属性为false时，默认值为Tabs的宽度。
未设置带样式的TabBar且vertical属性为true时，默认值为56vp。
设置SubTabbarStyle样式且vertical属性为false时，默认值为Tabs的宽度。
设置SubTabbarStyle样式且vertical属性为true时，默认值为56vp。
设置BottomTabbarStyle样式且vertical属性为true时，默认值为96vp。
设置BottomTabbarStyle样式且vertical属性为false时，默认值为Tabs的宽度。
**说明：**
设置为小于0或大于Tabs宽度值时，按默认值显示。 | | barHeight | number \| Length8+ | TabBar的高度值。
默认值：
未设置带样式的TabBar且vertical属性为false时，默认值为56vp。
未设置带样式的TabBar且vertical属性为true时，默认值为Tabs的高度。
设置SubTabbarStyle样式且vertical属性为false时，默认值为56vp。
设置SubTabbarStyle样式且vertical属性为true时，默认值为Tabs的高度。
设置BottomTabbarStyle样式且vertical属性为true时，默认值为Tabs的高度。
设置BottomTabbarStyle样式且vertical属性为false时，默认值为56vp。
**说明：**
设置为小于0或大于Tabs高度值时，按默认值显示。 | | animationDuration | number | TabContent滑动动画时长。不设置时，点击切换页签无动画，滑动切换有动画；设置时，点击切换和滑动切换都有动画。
默认值：300
**说明：**
设置为小于0或百分比时，按默认值显示。 | @@ -48,6 +48,7 @@ Tabs(value?: {barPosition?: BarPosition, index?: number, controller?: [TabsContr | fadingEdge10+ | boolean | 设置页签超过容器宽度时是否渐隐消失。
默认值：true | | barOverlap10+ | boolean | 设置TabBar是否背后变模糊并叠加在TabContent之上。
默认值：false | | barBackgroundColor10+ | [ResourceColor](ts-types.md#resourcecolor) | 设置TabBar的背景颜色。
默认值：透明 | +| barGridAlign10+ | [BarGridColumnOptions](#bargridcolumnoptions10对象说明) | 以栅格化方式设置TabBar的可见区域。具体参见BarGridColumnOptions对象。仅水平模式下有效。 | ## DividerStyle10+对象说明 @@ -58,6 +59,23 @@ Tabs(value?: {barPosition?: BarPosition, index?: number, controller?: [TabsContr | startMargin | [Length](ts-types.md#length) | 否 | 分割线与侧边栏顶端的距离（不支持百分比设置）。
默认值：0.0
单位：vp | | endMargin | [Length](ts-types.md#length) | 否 | 分割线与侧边栏底端的距离（不支持百分比设置）。
默认值：0.0
单位：vp | +## BarGridColumnOptions10+对象说明 + +| 名称 | 参数类型 | 必填 | 描述 | +| ----------- | ---------------------------------------- | ---- | ---------------------------------------- | +| margin | [Dimension](ts-types.md#dimension10) | 否 | 网格模式下的column边距（不支持百分比设置）。
默认值:24.0
单位：vp | +| gutter | [Dimension](ts-types.md#dimension10) | 否 | 网格模式下的column间隔（不支持百分比设置）。
默认值:24.0
单位：vp | +| sm | number | 否 | 小屏下，页签占用的columns数量，必须是非负偶数。小屏为大于等于320vp但小于600vp。
默认值为-1，代表页签占用TabBar全部宽度。 | +| md | number | 否 | 中屏下，页签占用的columns数量，必须是非负偶数。中屏为大于等于600vp但小于800vp。
默认值为-1，代表页签占用TabBar全部宽度。 | +| lg | number | 否 | 大屏下，页签占用的columns数量，必须是非负偶数。大屏为大于等于840vp但小于1024vp。
默认值为-1，代表页签占用TabBar全部宽度。 | + +## ScrollableBarModeOptions10+对象说明 + +| 名称 | 参数类型 | 必填 | 描述 | +| ----------- | ---------------------------------------- | ---- | ---------------------------------------- | +| margin | [Dimension](ts-types.md#dimension10) | 否 | Scrollable模式下的TabBar的左右边距（不支持百分比设置）。
默认值：0.0
单位：vp | +| nonScrollableLayoutStyle | [LayoutStyle](#layoutstyle10枚举说明) | 否 | Scrollable模式下不滚动时的页签排布方式。
默认值：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高度）。 | +## LayoutStyle10+枚举说明 + +| 名称 | 描述 | +| ---------- | ---------------------------------------- | +| ALWAYS_CENTER | 当页签内容超过TabBar宽度时，TabBar可滚动。
当页签内容不超过TabBar宽度时，TabBar不可滚动，页签紧凑居中。| +| ALWAYS_AVERAGE_SPLITE | 当页签内容超过TabBar宽度时，TabBar可滚动。
当页签内容不超过TabBar宽度时，TabBar不可滚动，且所有页签平均分配TabBar宽度。
仅水平模式下有效，否则视为LayoutStyle.ALWAYS_CENTER。| +| SPACE_BETWEEN_OR_CENTER | 当页签内容超过TabBar宽度时，TabBar可滚动。
当页签内容不超过TabBar宽度但超过TabBar宽度一半时，TabBar不可滚动，页签紧凑居中。
当页签内容不超过TabBar宽度一半时，TabBar不可滚动，保证页签居中排列在TabBar宽度一半，且间距相同。| + ## 事件 除支持[通用事件](ts-universal-events-click.md)外，还支持以下事件： @@ -72,6 +98,7 @@ Tabs(value?: {barPosition?: BarPosition, index?: number, controller?: [TabsContr | 名称 | 功能描述 | | ---------------------------------------- | ---------------------------------------- | | onChange(event: (index: number) => void) | Tab页签切换后触发的事件。
- index：当前显示的index索引，索引从0开始计算。
触发该事件的条件：
1、TabContent支持滑动时，组件触发滑动时触发。
2、通过[控制器](#tabscontroller)API接口调用。
3、通过[状态变量](../../quick-start/arkts-state.md)构造的属性值进行修改。
4、通过页签处点击触发。 | +| onTabBarClick(event: (index: number) => void)10+ | Tab页签点击后触发的事件。
- index：被点击的index索引，索引从0开始计算。
触发该事件的条件：
通过页签处点击触发。 | ## TabsController @@ -421,4 +448,169 @@ struct barBackgroundColorTest { } ``` -![tabs5](figures/tabs5.gif) \ No newline at end of file +![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