1# RowSplit 2 3 4>  **NOTE** 5> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. 6 7 8The **<RowSplit>** lays out child components horizontally and inserts a vertical divider between every two child components. 9 10 11## Required Permissions 12 13None 14 15 16## Child Components 17 18This component can contain child components. 19 20 21## APIs 22 23RowSplit() 24 25 26## Attributes 27 28| Name | Type | Description | 29| -------- | -------- | -------- | 30| resizeable | boolean | Whether the divider can be dragged. The default value is **false**. | 31 32>  **NOTE** 33> Similar to **<RowSplit>**, the divider of **<RowSplit>** can be dragged to a position that just fully holds a component. 34 35 36## Example 37 38 39``` 40@Entry 41@Component 42struct RowSplitExample { 43 build() { 44 Column() { 45 Text('The second line can be dragged').fontSize(9).fontColor(0xCCCCCC).width('90%') 46 RowSplit() { 47 Text('1').width('10%').height(100).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) 48 Text('2').width('10%').height(100).backgroundColor(0xD2B48C).textAlign(TextAlign.Center) 49 Text('3').width('10%').height(100).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) 50 Text('4').width('10%').height(100).backgroundColor(0xD2B48C).textAlign(TextAlign.Center) 51 Text('5').width('10%').height(100).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) 52 } 53 .resizeable(true) // The divider can be dragged. 54 .width('90%').height(100) 55 }.width('100%').margin({ top: 5 }) 56 } 57} 58``` 59 60 61
