• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# RowSplit
2
3The **RowSplit** lays out child components horizontally and inserts a vertical divider between every two child components.
4
5>  **NOTE**
6>
7> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
8
9## Child Components
10
11Supported
12
13This component limits the width of its child components through dividers. During initialization, the divider positions are calculated based on the width of its child components. After initialization, changes to the width of the child components do not take effect. Still, the space occupied by the child components can be changed by dragging the dividers between them.
14
15After initialization, dynamic changes to the [margin](ts-universal-attributes-size.md#margin), [border](ts-universal-attributes-border.md#border), or [padding](ts-universal-attributes-size.md#padding) attributes may cause the width of the child components to exceed the allowable distance between adjacent dividers. In such cases, dividers cannot be dragged to adjust the width of the child components.
16## APIs
17
18RowSplit()
19
20**Atomic service API**: This API can be used in atomic services since API version 11.
21
22**System capability**: SystemCapability.ArkUI.ArkUI.Full
23
24## Attributes
25
26### resizeable
27
28resizeable(value: boolean)
29
30Sets whether the divider can be dragged.
31
32**Atomic service API**: This API can be used in atomic services since API version 11.
33
34**System capability**: SystemCapability.ArkUI.ArkUI.Full
35
36**Parameters**
37
38| Name| Type| Mandatory| Description|
39| -------- | -------- | -------- | -------- |
40| value | boolean | Yes| Whether the divider can be dragged.<br>Default value: **false**|
41
42>  **NOTE**
43>
44> The divider of **RowSplit** can change the width of the left and right child components, but only to the extent that the resultant width falls within the maximum and minimum widths of the child components.
45>
46> Universal attributes such as [clip](ts-universal-attributes-sharp-clipping.md#clip12) and [margin](ts-universal-attributes-size.md#margin) are supported. If **clip** is not set, the default value **true** is used.
47
48
49## Example
50
51This example demonstrates the basic usage of **RowSplit**, which allows you to create draggable, horizontally laid-out child components.
52
53```ts
54// xxx.ets
55@Entry
56@Component
57struct RowSplitExample {
58  build() {
59    Column() {
60      Text('The second line can be dragged').fontSize(9).fontColor(0xCCCCCC).width('90%')
61      RowSplit() {
62        Text('1').width('10%').height(100).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
63        Text('2').width('10%').height(100).backgroundColor(0xD2B48C).textAlign(TextAlign.Center)
64        Text('3').width('10%').height(100).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
65        Text('4').width('10%').height(100).backgroundColor(0xD2B48C).textAlign(TextAlign.Center)
66        Text('5').width('10%').height(100).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
67      }
68      .resizeable(true) // The divider can be dragged.
69      .width('90%').height(100)
70    }.width('100%').margin({ top: 5 })
71  }
72}
73```
74
75![en-us_image_0000001219982729](figures/en-us_image_0000001219982729.gif)
76