A **\<tabs>** component can wrap at most one **[\<tab-bar>](../arkui-js/js-components-container-tab-bar.md)** and at most one **[\<tab-content>](../arkui-js/js-components-container-tab-content.md)**.
Only [\<tab-bar>](../arkui-js/js-components-container-tab-bar.md) and [\<tab-content>](../arkui-js/js-components-container-tab-content.md) are supported.
## Attributes
...
...
@@ -23,7 +22,7 @@ In addition to the [universal attributes](../arkui-js/js-components-common-attri
| Name | Type | Default Value | Mandatory | Description |
| index | number | 0 | No | Index of the active tab. |
| vertical | boolean | false | No | Whether the tab is vertical. Available values are as follows:<br>- **false**: The **\<tab-bar>** and **\<tab-content>** are arranged vertically.<br>- **true**: The **\<tab-bar>** and **\<tab-content>** are arranged horizontally.|
| vertical | boolean | false | No | Whether the tab is vertical. Available values are as follows:<br>- **false**: The **\<tab-bar>** and **\<tab-content>** are arranged vertically.<br>- **true**: The **\<tab-bar>** and **\<tab-content>** are arranged horizontally.|
| fingers | number | No| Minimum number of fingers to trigger a pan gesture. The value ranges from 1 to 10.<br>Default value: **1**|
| direction | PanDirection | No| Pan direction. The enumerated value supports the AND (&) and OR (\|) operations.<br>Default value: **PanDirection.All**|
| distance | number | No| Minimum pan distance to trigger the gesture, in vp.<br>Default value: **5**<br>**NOTE**<br>If a pan gesture and tab swipe occur at the same time, set **distance** to **1** so that the gesture can be more easily recognized.|
| distance | number | No| Minimum pan distance to trigger the gesture, in vp.<br>Default value: **5**<br>**NOTE**<br>If a pan gesture and [tab](ts-container-tabs.md) swipe occur at the same time, set **distance** to **1** so that the gesture can be more easily recognized.|
| fingers | number | No | Minimum number of fingers to trigger a pan gesture. The value ranges from 1 to 10.<br>Default value: **1**|
| direction | PanDirection | No | Pan direction. The enumerated value supports the AND (&) and OR (\|) operations.<br>Default value: **All**|
| distance | number | No | Minimum pan distance to trigger the gesture, in vp.<br>Default value: **5.0**<br>**NOTE**<br>If a pan gesture and tab swipe occur at the same time, set **distance** to **1** so that the gesture can be more easily recognized.|
| distance | number | No | Minimum pan distance to trigger the gesture, in vp.<br>Default value: **5.0**<br>**NOTE**<br>If a pan gesture and [tab](ts-container-tabs.md) swipe occur at the same time, set **distance** to **1** so that the gesture can be more easily recognized.|
A container that contains a sidebar and content area as its child components. The sidebar is the first child component and can be shown or hidden as needed. The content area is the second child component.
## Stack, Flex, and Grid
-[Stack](ts-container-stack.md)
A container where child components are successively stacked and the latter one overwrites the previous one.
-[Flex](ts-container-flex.md)
A container that allows for flexible layout of child components.
-[GridContainer](ts-container-gridcontainer.md)
A container that lays out components vertically and is used only in the grid layout.
-[GridRow](ts-container-gridrow.md)
A container that is used in a grid layout, together with its child component **\<GridCol>**.
-[GridCol](ts-container-gridcol.md)
A container that must be used as a child component of the **\<GridRow>** container.
A container that is used for element alignment in complex scenarios.
## List and Grid
-[List](ts-container-list.md)
A container that presents a series of list items arranged in a column with the same width. It supports presentations of the same type of data in a multiple and coherent row style, for example, images or text.
-[ListItem](ts-container-listitem.md)
A component that displays a specific item in the list and that must be used together with **\<List>**.
-[ListItemGroup](ts-container-listitemgroup.md)
A component that displays list item groups and that must be used together with **\<List>**.
-[Grid](ts-container-grid.md)
A container that consists of cells formed by rows and columns. You can specify the cells where items are located to form various layouts.
-[GridItem](ts-container-griditem.md)
A container that provides a single item in a grid.
## Scroll and Swipe
-[Scroll](ts-container-scroll.md)
A container that scrolls the content when the layout size of a component exceeds the size of its parent component.
-[Swiper](ts-container-swiper.md)
A container that is able to display child components in looping mode.
-[WaterFlow](ts-container-waterflow.md)
A container that consists of cells formed by rows and columns and arranges items of different sizes from top to bottom according to the preset rules.
-[FlowItem](ts-container-flowitem.md)
A child component of the **\<WaterFlow>** container that is used to display specific items in the container layout.
## Navigation
-[Navigator](ts-container-navigator.md)
A container that provides redirection.
-[Navigation](ts-basic-components-navigation.md)
A container that typically functions as the root container of a page and displays the title bar, toolbar, and navigation bar based on the attribute settings.
-[NavRouter](ts-basic-components-navrouter.md)
A container that provides default logic for click response processing, eliminating the need for manual logic definition.
A component that allows users to use a pattern password for authentication. It enters the input state once a finger is pressed against it, and exits the input state and completes the input once the finger leaves the screen.
-[RichText](ts-basic-components-richtext.md)
A component that parses and displays HTML text.
## Image, Video, and Media
-[Image](ts-basic-components-image.md)
A component that is used to render and display local and online images.
A component that is used to create a loading animation.
-[Marquee](ts-basic-components-marquee.md)
A component that is used to display a scrolling piece of text. The text is scrolled only when its width exceeds the width of the **\<Marquee>** component.
-[Progress](ts-basic-components-progress.md)
A component that is used to provide a progress indicator that displays the progress of content loading or an operation.
-[QRCode](ts-basic-components-qrcode.md)
A component that is used to display a QR code.
-[TextClock](ts-basic-components-textclock.md)
A component that displays the current system time in text format for different time zones. The time is accurate to seconds.
-[TextTimer](ts-basic-components-texttimer.md)
A component that displays timing information and is controlled in text format.
## Blank and Divider
-[Blank](ts-basic-components-blank.md)
A component that is able to automatically fill the empty spaces in the container along the main axis. It is valid only when the parent component is **\<Row>** or **\<Column>**.
-[Divider](ts-basic-components-divider.md)
A component that is used to separate content blocks and elements.
## Canvas and Graphics Drawing
-[Canvas](ts-components-canvas-canvas.md)
A component that can be used to customize drawings.
-[Circle](ts-drawing-components-circle.md)
A component that is used to draw a circle.
-[Ellipse](ts-drawing-components-ellipse.md)
A component that is used to draw an ellipse.
-[Line](ts-drawing-components-line.md)
A component that is used to draw a straight line.
-[Polyline](ts-drawing-components-polyline.md)
A component that is used to draw a polyline.
-[Polygon](ts-drawing-components-polygon.md)
A component that is used to draw a polygon.
-[Path](ts-drawing-components-path.md)
A component that is used to define a closed shape.
-[Rect](ts-drawing-components-rect.md)
A component that is used to draw a rectangle.
-[Shape](ts-drawing-components-shape.md)
A parent component of the drawing components. The attributes provided by this component are universal attributes supported by all the drawing components.
## Web
-[Web](ts-basic-components-web.md)
A component that can be used to display web pages.
## Miscellaneous
-[ScrollBar](ts-basic-components-scrollbar.md)
A component that is used together with scrollable components, such as **\<List>**, **\<Grid>**, and **\<Scroll>**.
-[Badge](ts-container-badge.md)
A container that can be attached to another component for tagging.
A component that is used to control the application window, providing the component animator and application window linkage animator during application startup and exit.
**\<FlowItem>** is a child component of the [\<WaterFlow>](ts-container-waterflow.md) container and is used to display specific items in the container layout.
> **NOTE**
>
> This component is supported since API version 9. Updates will be marked with a superscript to indicate their earliest API version.
## Child Components
This component supports only one child component.
## APIs
FlowItem()
Ceates a child component in the **\<WaterFlow>** layout.
## Attributes
None
## Example
See [WaterFlow](ts-container-waterflow.md#example).
The **\<WaterFlow>** component is a container that consists of cells formed by rows and columns and arranges items of different sizes from top to bottom according to the preset rules.
> **NOTE**
>
> This component is supported since API version 9. Updates will be marked with a superscript to indicate their earliest API version.
## Child Components
The [\<FlowItem>](ts-container-flowitem.md) child component is supported.
| footer | [CustomBuilder](ts-types.md#custombuilder8) | No | Footer of the **\<WaterFlow>** component. |
| scroller | [Scroller](ts-container-scroll.md#scroller) | No | Controller, which can be bound to scrollable components.<br>The **\<WaterFlow>** component supports only the **scrollToIndex** API of the **\<Scroller>** component.|
## Attributes
In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
| Name| Type| Description|
| -------- | -------- | -------- |
| columnsTemplate | string | Number of columns in the layout. If this attribute is not set, one column is used by default.<br>For example, **'1fr 1fr 2fr'** indicates three columns, with the first column taking up 1/4 of the parent component's full width, the second column 1/4, and the third column 2/4. This attribute supports [auto-fill](#auto-fill).<br>Default value: **'1fr'**|
| rowsTemplate | string | Number of rows in the layout. If this attribute is not set, one row is used by default.<br>For example, **'1fr 1fr 2fr'** indicates three rows, with the first row taking up 1/4 of the parent component's full height, the second row 1/4, and the third row 2/4. This attribute supports [auto-fill](#auto-fill).<br>Default value: **'1fr'**|
| itemConstraintSize | [ConstraintSizeOptions](ts-types.md#constraintsizeoptions) | Size constraints of the child components during layout. |
| columnsGap | Length |Gap between columns.<br>Default value: **0**|
| rowsGap | Length |Gap between rows.<br> Default value: **0**|
| layoutDirection | [FlexDirection](ts-appendix-enums.md#flexdirection) |Main axis direction of the layout.<br>Default value: **FlexDirection.Column**|
The priority of **layoutDirection** is higher than that of **rowsTemplate** and **columnsTemplate**. Depending on the **layoutDirection** settings, there are three layout modes:
-**layoutDirection** is set to **FlexDirection.Column** or **FlexDirection.ColumnReverse**
In this case, **columnsTemplate** is valid. If it is not set, the default value is used. For example, if **columnsTemplate** is set to **"1fr 1fr"** and **rowsTemplate** **"1fr 1fr 1fr"**, child components are arranged in vertical layout, with the cross axis equally divided into two columns.
-**layoutDirection** set to **FlexDirection.Row** or **FlexDirection.RowReverse**
In this case, **rowsTemplate** is valid. If it is not set, the default value is used. For example, if **columnsTemplate** is set to **"1fr 1fr"** and **rowsTemplate** **"1fr 1fr 1fr"**, child components are arranged in horizontal layout, with the cross axis equally divided into three columns.
-**layoutDirection** is not set
In this case, the default value of **layoutDirection** is used, which is **FlexDirection.Column**, and **columnsTemplate** is valid. For example, if **columnsTemplate** is set to **"1fr 1fr"** and **rowsTemplate** **"1fr 1fr 1fr"**, child components are arranged in vertical layout, with the cross axis equally divided into two columns.
## Events
In addition to the [universal events](ts-universal-events-click.md), the following events are supported.
| Name| Description|
| -------- | -------- |
| onReachStart(event: () => void) | Triggered when the component reaches the start.|
| onReachEnd(event: () => void) | Triggered when the component reaches the end.|
## auto-fill
The **columnsTemplate** and **rowsTemplate** attributes supports **auto-fill** in the following format:
```css
repeat(auto-fill,track-size)
```
Where, **repeat** and **auto-fill** are keywords, and **track-size** indicates the row height or column width. The supported units include px, vp, %, and digits. The value of **track-size** must contain at least one valid row height or column width.
## Example
```ts
// WaterFlowDataSource.ets
// Object that implements the IDataSource API, which is used by the <WaterFlow> component to load data.
