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 Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/TabBarStyle.jpeg 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 1c61f55bd76dd289c0ee6cef06bde7ac990fd8e3..8a2612b58f05f0642f203113e8f6ab60746b4256 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 \| Resource \| {
icon?: string \| Resource,
text?: string \| Resource
}
\| [CustomBuilder](ts-types.md)8+ | 设置TabBar上显示内容。
CustomBuilder: 构造器，内部可以传入组件（API8版本以上适用）。
>  **说明：**
> 如果icon采用svg格式图源，则要求svg图源删除其自有宽高属性值。如采用带有自有宽高属性的svg图源，icon大小则是svg本身内置的宽高属性值大小。 | +| tabBar9+ | [SubTabBarStyle](#subtabbarstyle) \| [BottomTabBarStyle](#bottomtabbarstyle) | 设置TabBar上显示内容。
SubTabBarStyle: 子页签样式，参数为文字。
BottomTabBarStyle: 底部页签和侧边页签样式，参数为文字和图片。 | > **说明：** > - TabContent组件不支持设置通用宽度属性，其宽度默认撑满Tabs父组件。 > - TabContent组件不支持设置通用高度属性，其高度由Tabs父组件高度与TabBar组件高度决定。 > - TabContent组件不支持[触摸热区设置](ts-universal-attributes-touch-target.md)。 +## SubTabBarStyle9+ + +子页签样式。 + +### constructor9+ + +constructor(content: string | Resource) + +SubTabBarStyle的构造函数。 + +**参数：** + +| 参数名 | 参数类型 | 必填 | 参数描述 | +| -------- | -------- | -------- | -------- | +| content | string \| [Resource](ts-types.md#resource) | 是 | 页签内的文字内容。 | + +## BottomTabBarStyle9+ + +底部页签和侧边页签样式。 + +### constructor9+ + +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 c90880b34b81165fc0ee143c7a510a379bd8462d..47d0b607cd3925d36c86a35043630b0a5e21f174 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枚举说明。
默认值：BarMode.Fixed | | barWidth | number \| Length8+ | TabBar的宽度值。 | | barHeight | number \| Length8+ | TabBar的高度值。 | -| animationDuration | number | TabContent滑动动画时长。
默认值：200 | +| animationDuration | number | TabContent滑动动画时长。不设置时，点击切换页签无动画，滑动切换有动画；设置时，点击切换和滑动切换都有动画。
默认值：200 | ## BarMode枚举说明