From 10c73f4938ac6e69c70b6086b5cce61eb68fd4a9 Mon Sep 17 00:00:00 2001 From: "ester.zhou" Date: Tue, 18 Apr 2023 10:53:20 +0800 Subject: [PATCH] Update docs (15700) Signed-off-by: ester.zhou --- .../arkui-ts/ts-container-tabcontent.md | 99 ++++++++++++++++--- .../reference/arkui-ts/ts-container-tabs.md | 67 +++++++------ 2 files changed, 126 insertions(+), 40 deletions(-) diff --git a/en/application-dev/reference/arkui-ts/ts-container-tabcontent.md b/en/application-dev/reference/arkui-ts/ts-container-tabcontent.md index 6b6a994a6f..190118b6a7 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-tabcontent.md +++ b/en/application-dev/reference/arkui-ts/ts-container-tabcontent.md @@ -11,6 +11,10 @@ The **\** component is used only in the **\** component. It co This component supports only one child component. +> **NOTE** +> +> System components and custom components can be built in, and rendering control types ([if/else](../../quick-start/arkts-rendering-control-ifelse.md), [ForEach](../../quick-start/arkts-rendering-control-foreach.md), and [LazyForEach](../../quick-start/arkts-rendering-control-lazyforeach.md)) are supported. + ## APIs @@ -23,37 +27,95 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the | Name| Type| Description| | -------- | -------- | -------- | -| tabBar | string \| Resource \| {
icon?: string \| Resource,
text?: string \| Resource
}
\| [CustomBuilder](ts-types.md)8+ | Content displayed on the tab bar.
**CustomBuilder**: builder, to which components can be passed (applicable to API version 8 and later versions).
**NOTE**
If an icon uses an SVG image, the width and height attributes of the SVG image must be deleted. Otherwise, the icon size will be determined by the width and height attributes of the SVG image. | -| tabBar9+ | [SubTabBarStyle](#subtabbarstyle) \| [BottomTabBarStyle](#bottomtabbarstyle) | Content displayed on the tab bar.
**SubTabBarStyle**: subtab style. It takes text as its input parameter.
**BottomTabBarStyle**: bottom and side tab style. It takes text and images as its input parameters.| +| tabBar | string \| Resource \| {
icon?: string \| Resource,
text?: string \| Resource
}
\| [CustomBuilder](ts-types.md)8+ | Content displayed on the tab bar.
**CustomBuilder**: builder, to which components can be passed (applicable to API version 8 and later versions).
**NOTE**
If an icon uses an SVG image, the width and height attributes of the SVG image must be deleted. Otherwise, the icon size will be determined by the width and height attributes of the SVG image.
If the content set exceeds the space provided by the tab bar, it will be clipped.| +| tabBar9+ | [SubTabBarStyle](#subtabbarstyle9) \| [BottomTabBarStyle](#bottomtabbarstyle9) | Content displayed on the tab bar.
**SubTabBarStyle**: subtab style. It takes text as its input parameter.
**BottomTabBarStyle**: bottom and side tab style. It takes text and images as its input parameters.
**NOTE**
The bottom tab style does not include an underline.
When an icon display error occurs, a gray blank block is displayed.| > **NOTE** -> - The **\** component does not support setting of the common width attribute. By default, its width is the same as that of the parent **\** component. -> - The **\** component does not support setting of the common height attribute. Its height is determined by the height of the parent **\** component and the **\** component. -> - **\** does not support page scrolling. If page scrolling is required, consider nesting a list. +> +> - The **\** component does not support setting of the common width attribute. By default, its width is the same as that of the parent **\** component. +> - The **\** component does not support setting of the common height attribute. Its height is determined by the height of the parent **\** component and the **\** component. +> - If the **vertical** attribute is **false**, the width and height descriptions are swapped in the preceding two restrictions. +> - **\** does not support page scrolling. If page scrolling is required, consider nesting a list. ## SubTabBarStyle9+ Implements the subtab style. -### constructor9+ +### constructor constructor(content: string | Resource) -A constructor used to create a **SubTabBarStyle** instance. +Constructor used to create a **SubTabBarStyle** instance. **Parameters** | Name| Type | Mandatory| Description| | -------- | -------- | -------- | -------- | -| content | string \| [Resource](ts-types.md#resource) | Yes| Text for the tab.| +| content | string \| [Resource](ts-types.md#resource) | Yes| Text for the tab. Since API version 10, the type of **content** is **ResourceStr**.| + +### of10+ + +static of(content: ResourceStr) + +Static constructor used to create a **SubTabBarStyle** instance. + +**Parameters** + +| Name | Type | Mandatory| Description | +| ------- | ------------------------------------------ | ---- | ------------------ | +| content | [ResourceStr](ts-types.md#resourcestr) | Yes | Text for the tab.| + +### Attributes + +The following attributes are supported. + +| Name | Type | Description | +| ------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | +| indicator10+ | [IndicatorStyle](#indicatorstyle10)| Underline indicator style of the selected subtab. It is valid only in the horizontal layout.
| +| selectedMode10+ | [SelectedMode](#selectedmode10) | Display mode of the selected subtab.
Default value: **SelectedMode.INDICATOR**| +| board10+ | [BoardStyle](#boardstyle10) | Board style of the selected subtab.| +| labelStyle10+ | [LabelStyle](#labelstyle10) | Label text and font style of the selected subtab.| + +## IndicatorStyle10+ + +| Name| Type| Mandatory| Description| +| -------- | -------- | -------- | -------------------------------- | +| color | [ResourceColor](ts-types.md#resourcecolor) | No| Underline indicator color and board color.
Default value: **#FF007DFF**| +| height | [Length](ts-types.md#length) | No| Height of the underline indicator.
Default value: **2.0**
Unit: vp| +| width | [Length](ts-types.md#length) | No| Width of the underline indicator.
Default value: **0.0**
Unit: vp| +| borderRadius | [Length](ts-types.md#length) | No| Radius of the rounded corner of the underline indicator.
Default value: **0.0**
Unit: vp| +| marginTop | [Length](ts-types.md#length) | No| Spacing between the underline indicator and text.
Default value: **8.0**
Unit: vp| + +## SelectedMode10+ +| Name | Description | +| ---------- | ------------------------ | +| INDICATOR | Underline indicator mode. | +| BOARD | Board mode. | + +## BoardStyle10+ + +| Name| Type| Mandatory| Description| +| -------- | -------- | -------- | ------------------------------------ | +| borderRadius | [Length](ts-types.md#length) | No| Radius of the rounded corner of the underline indicator.
Default value: **8.0**
Unit: vp| + +## LabelStyle10+ + +| Name | Type | Mandatory| Description | +| -------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | +| overflow | [TextOverflow](ts-appendix-enums.md#textoverflow) | No | Display mode when the label text is too long. By default, an ellipsis (...) is used to represent text overflow.| +| maxLines | number | No | Maximum number of lines in the label text. By default, text is automatically folded. If this attribute is specified, the text will not exceed the specified number of lines. If there is extra text, you can use **textOverflow** to specify how it is displayed.| +| minFontSize | number \| [ResourceStr](ts-types.md#resourcestr) | No | Minimum font size of the label text. For the setting to take effect, this attribute must be used together with **maxFontSize**, **maxLines**, or layout constraint settings.| +| maxFontSize | number \| [ResourceStr](ts-types.md#resourcestr) | No | Maximum font size of the label text. For the setting to take effect, this attribute must be used together with **minFontSize**, **maxLines**, or layout constraint settings.| +| heightAdaptivePolicy | [TextHeightAdaptivePolicy](ts-appendix-enums.md#textheightadaptivepolicy10) | No | How the adaptive height is determined for the label text. | +| font | [Font](ts-types.md#font) | No | Font of the label text. | ## BottomTabBarStyle9+ Implements the bottom and side tab style. -### constructor9+ +### constructor -constructor(icon: string | Resource, text: string | Resource) +constructor(icon: string | Resource, content: string | Resource) A constructor used to create a **BottomTabBarStyle** instance. @@ -61,8 +123,20 @@ A constructor used to create a **BottomTabBarStyle** instance. | Name| Type | Mandatory| Description| | -------- | -------- | -------- | -------- | -| icon | string \| [Resource](ts-types.md#resource) | Yes| Image for the tab.| -| text | string \| [Resource](ts-types.md#resource) | Yes| Text for the tab.| +| icon | string \| [Resource](ts-types.md#resource) | Yes| Image for the tab. Since API version 10, the type of **icon** is **ResourceStr**.| +| text | string \| [Resource](ts-types.md#resource) | Yes| Text for the tab. Since API version 10, the type of **text** is **ResourceStr**.| + +### of10+ + +static of(icon: ResourceStr, text: ResourceStr) +Static constructor used to create a **BottomTabBarStyle** instance. + +**Parameters** + +| Name| Type | Mandatory| Description| +| -------- | -------- | -------- | -------- | +| icon | [ResourceStr](ts-types.md#resourcestr) | Yes| Image for the tab.| +| text | [ResourceStr](ts-types.md#resourcestr) | Yes| Text for the tab.| ## Example @@ -325,3 +399,4 @@ struct TabBarStyleExample { ``` ![tabbarStyle](figures/TabBarStyle.jpeg) + \ No newline at end of file diff --git a/en/application-dev/reference/arkui-ts/ts-container-tabs.md b/en/application-dev/reference/arkui-ts/ts-container-tabs.md index e1d90464b3..db9325e998 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-tabs.md +++ b/en/application-dev/reference/arkui-ts/ts-container-tabs.md @@ -2,7 +2,7 @@ The **\** component is a container component that allows users to switch between content views through tabs. Each tab page corresponds to a content view. -> **NOTE**
+> **NOTE** > > This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. @@ -18,47 +18,58 @@ Tabs(value?: {barPosition?: BarPosition, index?: number, controller?: [TabsContr **Parameters** -| Name| Type| Mandatory| Description| -| -------- | -------- | -------- | -------- | -| barPosition | BarPosition | No| Position of the **\** component.
Default value: **BarPosition.Start**| -| index | number | No| Initial tab index.
Default value: **0**| -| controller | [TabsController](#tabscontroller) | No| Tab controller.| +| Name | Type | Mandatory | Description | +| ----------- | --------------------------------- | ---- | ---------------------------------------- | +| barPosition | BarPosition | No | Position of the **\** component.
Default value: **BarPosition.Start** | +| index | number | No | Initial tab index.
Default value: **0**
**NOTE**

A value less than 0 evaluates to the default value.
The value ranges from 0 to the number of **\** subnodes minus 1.
When this parameter is set to different values, the slide animation for tab switching is enabled by default. To disable the animation, set **animationDuration** to **0**.| +| controller | [TabsController](#tabscontroller) | No | Tab controller. | ## BarPosition -| Name| Description| -| -------- | -------- | +| Name | Description | +| ----- | ---------------------------------------- | | Start | If the **vertical** attribute is set to **true**, the tab is on the left of the container. If the **vertical** attribute is set to **false**, the tab is on the top of the container.| -| End | If the **vertical** attribute is set to **true**, the tab is on the right of the container. If the **vertical** attribute is set to **false**, the tab is at the bottom of the container.| +| End | If the **vertical** attribute is set to **true**, the tab is on the right of the container. If the **vertical** attribute is set to **false**, the tab is at the bottom of the container.| ## Attributes In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. -| Name| Type| Description| -| -------- | -------- | -------- | -| vertical | boolean | Whether to use vertical tabs. The value **true** means to use vertical tabs, and **false** means to use horizontal tabs.
Default value: **false**| -| scrollable | boolean | Whether the tabs are scrollable. The value **true** means that the tabs are scrollable, and **false** means the opposite.
Default value: **true**| -| barMode | BarMode | Tab bar layout mode. For details, see **BarMode**.
Default value: **BarMode.Fixed**| -| barWidth | number \| Length8+ | Width of the tab bar. | -| barHeight | number \| Length8+ | Height of the tab bar. | -| animationDuration | number | Duration of the slide animation for tab switching. If this parameter is set, the tab switching animation is played when the user switches between tabs by sliding or clicking. If this parameter is not set, the tab switching animation is played only when the user switches between tabs by sliding.
Default value: **200**| +| Name | Type | Description | +| ------------------------ | ---------------------------------------- | ---------------------------------------- | +| vertical | boolean | Whether to use vertical tabs. The value **true** means to use vertical tabs, and **false** means to use horizontal tabs.
Default value: **false**| +| scrollable | boolean | Whether the tabs are scrollable. The value **true** means that the tabs are scrollable, and **false** means the opposite.
Default value: **true**| +| barMode | BarMode | Tab bar layout mode. For details, see **BarMode**.
Default value: **BarMode.Fixed**| +| barWidth | number \| Length8+ | Width of the tab bar.
**NOTE**

A value less than 0 or greater than the width of the **\** component evaluates to the default value.| +| barHeight | number \| Length8+ | Height of the tab bar.
**NOTE**

A value less than 0 or greater than the width of the **\** component evaluates to the default value.| +| animationDuration | number | Duration of the slide animation for tab switching. If this parameter is set, the tab switching animation is played when the user switches between tabs by sliding or clicking. If this parameter is not set, the tab switching animation is played only when the user switches between tabs by sliding.
Default value: **300**
**NOTE**
A value less than 0 or in percentage evaluates to the default value. | +| divider10+ | [DividerStyle](#dividerstyle10) \| null | Whether the divider is displayed for the **\** and **\** components and the divider style. By default, the divider is not displayed.
**DividerStyle**: divider style.
**null**: The divider is not displayed.| +| FadingEdge10+ | boolean | Whether the tab fades out when it exceeds the container width.
Default value: **true** | + +## DividerStyle10+ + +| Name | Type | Mandatory | Description | +| ----------- | ---------------------------------------- | ---- | ----------------------------------- | +| strokeWidth | [Length](ts-types.md#length) | Yes | Width of the divider. | +| color | [ResourceColor](ts-types.md#resourcecolor) | No | Color of the divider.
Default value: **#33182431** | +| startMargin | [Length](ts-types.md#length) | No | Distance between the divider and the top of the sidebar.
Default value: **0.0**
Unit: vp| +| endMargin | [Length](ts-types.md#length) | No | Distance between the divider and the bottom of the sidebar.
Default value: **0.0**
Unit: vp| ## BarMode -| Name| Description| -| -------- | -------- | +| Name | Description | +| ---------- | ---------------------------------------- | | Scrollable | The width of each tab is determined by the actual layout. The tabs are scrollable in the following case: In horizontal layout, the total width exceeds the tab bar width; in horizontal layout, the total height exceeds the tab bar height.| -| Fixed | The width of each tab is determined by equally dividing the number of tabs by the bar width (or the bar height in vertical layout).| +| Fixed | The width of each tab is determined by equally dividing the number of tabs by the bar width (or bar height in the vertical layout).| ## Events In addition to the [universal events](ts-universal-events-click.md), the following events are supported. -| Name| Description| -| -------- | -------- | -| onChange(event: (index: number) => void) | Event triggered when a tab is switched.| +| Name | Description | +| ------------------------------------------- | ------------------------------------------------------------ | +| onChange(event: (index: number) => void) | Triggered when a tab is switched.
- **index**: index of the active tab. The index starts from 0.
This event is triggered when any of the following conditions is met:
1. The **\** component supports sliding, and the user slides on the tab bar.
2. The [Controller](#tabscontroller) API is called.
3. The attribute value is updated using a [state variable](../../quick-start/arkts-state.md).
4. A tab is clicked. | ## TabsController @@ -66,9 +77,8 @@ Defines a tab controller, which is used to control switching of tabs. One **Tabs ### Objects to Import -``` +```ts controller: TabsController = new TabsController() - ``` ### changeIndex @@ -79,9 +89,9 @@ Switches to the specified tab. **Parameters** -| Name| Type| Mandatory| Description| -| -------- | -------- | -------- | -------- | -| value | number | Yes| Index of the tab. The value starts from 0.| +| Name | Type | Mandatory | Description | +| ----- | ------ | ---- | ---------------------------------------- | +| value | number | Yes | Index of the tab. The value starts from 0.
**NOTE**

If this parameter is set to a value less than 0 or greater than the maximum number, the event will be invalid.| ## Example @@ -148,3 +158,4 @@ struct TabsExample { ``` ![tabs2](figures/tabs2.gif) + \ No newline at end of file -- GitLab