| itemSpace | Length | 0 | Space between child components. |
| cachedCount<sup>8+</sup> | number | 1 | Number of child components to be cached. |
| disableSwipe<sup>8+</sup> | boolean | false | Whether to disable the swipe feature. |
| curve<sup>8+</sup> | [Curve](ts-animatorproperty.md)\| Curves | Curve.Ease | Animation curve. The ease-in/ease-out curve is used by default. For details about common curves, see [Curve enums](ts-animatorproperty.md). You can also create custom curves ([interpolation curve objects](ts-interpolation-calculation.md)) by using the API provided by the interpolation calculation module. |
| curve<sup>8+</sup> | [Curve](ts-animatorproperty.md)\| Curves | Curve.Ease | Animation curve. The ease-in/ease-out curve is used by default. For details about common curves, see [Curve enums](ts-animatorproperty.md). You can also create custom curves ([interpolation curve objects](ts-interpolation-calculation.md)) by using APIs provided by the interpolation calculation module. |
### SwiperController
Controller of the **<Swiper>** component. You can bind this object to the **<Swiper>** component and use it to control page switching.
Controller of the **<Swiper\>** component. You can bind this object to the **<Swiper\>** component and use it to control page switching.
| Name | Description |
| Name | Description |
| -------- | -------- |
| showNext():void | Turns to the next page. |
| showPrevious():void | Turns to the previous page. |
...
...
@@ -57,7 +57,7 @@ Controller of the **<Swiper>** component. You can bind this object to the
## Events
| Name | Description |
| Name | Description |
| -------- | -------- |
| onChange( index: number) => void | Triggered when the index of the currently displayed component changes. |
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
The **<TabContent>** component is used only in the **<Tabs>** component. It corresponds to the content view of a switched tab page.
The **<TabContent\>** component is used only in the **<Tabs\>** component. It corresponds to the content view of a switched tab page.
## Required Permissions
...
...
@@ -29,12 +29,12 @@ Touch target configuration is not supported.
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| tabBar | string \| {<br/>icon?: string,<br/>text?: string<br/>}<br/>\|[CustomBuilder](../../ui/ts-types.md)<sup>8+</sup> | - | Content displayed on the tab bar.<br/>**CustomBuilder**: builder, to which components can be passed (applicable to API version 8 and later versions).<br/>> **NOTE**<br/>> 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. |
| tabBar | string \| {<br/>icon?: string,<br/>text?: string<br/>}<br/>\|[CustomBuilder](../../ui/ts-types.md)<sup>8+</sup> | - | Content displayed on the tab bar.<br/>**CustomBuilder**: builder, to which components can be passed (applicable to API version 8 or later).<br/>**NOTE**<br/>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. |
> - The **<TabContent>** component does not support setting of the common width attribute. By default, its width is the same as that of the parent **<Tabs>** component.
> **NOTE**
> - The **<TabContent\>** component does not support setting of the common width attribute. By default, its width is the same as that of the parent **<Tabs\>** component.
>
> - The **<TabContent>** component does not support setting of the common height attribute. Its height is determined by the height of the parent **<Tabs>** component and the **<TabBar>** component.
> - The **<TabContent\>** component does not support setting of the common height attribute. Its height is determined by the height of the parent **<Tabs\>** component and the **<TabBar\>** component.
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
The **<Tabs>** component is a container component that allows users to switch between content views through tabs. Each tab page corresponds to a content view.
The **<Tabs\>** component is a container component that allows users to switch between content views through tabs. Each tab page corresponds to a content view.
## Required Permissions
...
...
@@ -15,7 +15,7 @@ None
## Child Components
The **<Tabs>** component can contain [TabContent](ts-container-tabcontent.md) child components.
A **<Tabs\>** component can contain multiple [TabContent](ts-container-tabcontent.md) components.
## APIs
...
...
@@ -23,14 +23,14 @@ The **<Tabs>** component can contain [TabContent](ts-container-tabcontent.
| 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. |
...
...
@@ -50,7 +50,7 @@ Touch target configuration is not supported.
| animationDuration | number | 200 | Animation duration of the tab content. |
- BarMode enums
| Name | Description |
| Name | Description |
| -------- | -------- |
| Scrollable | The actual layout width of the tab bar is used. If the actual width exceeds the total length, the tab bar is scrollable. |
| Fixed | The widths of all tab bars are evenly allocated. |
