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 13## APIs 14 15RowSplit() 16 17 18## Attributes 19 20| Name| Type| Description| 21| -------- | -------- | -------- | 22| resizeable | boolean | Whether the divider can be dragged.<br/>Default value: **false** | 23 24> **NOTE** 25> 26> 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. 27> 28> Universal attributes such as **clip** and **margin** are supported. If **clip** is not set, the default value **true** is used. 29 30 31## Example 32 33```ts 34// xxx.ets 35@Entry 36@Component 37struct RowSplitExample { 38 build() { 39 Column() { 40 Text('The second line can be dragged').fontSize(9).fontColor(0xCCCCCC).width('90%') 41 RowSplit() { 42 Text('1').width('10%').height(100).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) 43 Text('2').width('10%').height(100).backgroundColor(0xD2B48C).textAlign(TextAlign.Center) 44 Text('3').width('10%').height(100).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) 45 Text('4').width('10%').height(100).backgroundColor(0xD2B48C).textAlign(TextAlign.Center) 46 Text('5').width('10%').height(100).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) 47 } 48 .resizeable(true) // The divider can be dragged. 49 .width('90%').height(100) 50 }.width('100%').margin({ top: 5 }) 51 } 52} 53``` 54 55 56
