1# ColumnSplit 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 **<ColumnSplit>** lays out child components vertically and inserts a horizontal 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 23ColumnSplit() 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 **<ColumnSplit>** can be dragged to a position that just fully holds a component. 34 35 36## Example 37 38 39``` 40@Entry 41@Component 42struct ColumnSplitExample { 43 build() { 44 Column(){ 45 Text('The secant line can be dragged').fontSize(9).fontColor(0xCCCCCC).width('90%') 46 ColumnSplit() { 47 Text('1').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) 48 Text('2').width('100%').height(50).backgroundColor(0xD2B48C).textAlign(TextAlign.Center) 49 Text('3').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) 50 Text('4').width('100%').height(50).backgroundColor(0xD2B48C).textAlign(TextAlign.Center) 51 Text('5').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) 52 } 53 .resizeable(true) 54 .width('90%').height('60%') 55 }.width('100%') 56 } 57} 58``` 59 60 61
