1# ColumnSplit 2 3The **ColumnSplit** component lays out child components vertically and inserts a horizontal 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## Child Components 9 10Supported 11 12This component limits the height of its child components through dividers. During initialization, the divider positions are calculated based on the height of its child components. After initialization, changes to the height 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. 13 14After 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 size of the child components to exceed the allowable distance between adjacent dividers. In such cases, dividers cannot be dragged to adjust the height of the child components. 15## APIs 16 17ColumnSplit() 18 19**Atomic service API**: This API can be used in atomic services since API version 11. 20 21**System capability**: SystemCapability.ArkUI.ArkUI.Full 22 23## Attributes 24 25### resizeable 26 27resizeable(value: boolean) 28 29Sets whether the divider can be dragged. 30 31**Atomic service API**: This API can be used in atomic services since API version 11. 32 33**System capability**: SystemCapability.ArkUI.ArkUI.Full 34 35**Parameters** 36 37| Name| Type | Mandatory| Description | 38| ------ | ------- | ---- | ------------------------------------ | 39| value | boolean | Yes | Whether the divider can be dragged.<br>Default value: **false**| 40 41### divider<sup>10+</sup> 42 43divider(value: ColumnSplitDividerStyle | null) 44 45Margin of the divider. 46 47**Atomic service API**: This API can be used in atomic services since API version 11. 48 49**System capability**: SystemCapability.ArkUI.ArkUI.Full 50 51**Parameters** 52 53| Name| Type | Mandatory| Description | 54| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 55| value | [ColumnSplitDividerStyle](#columnsplitdividerstyle10) \| null | Yes | Margin of the divider.<br>Default value: **null**, indicating that the top and bottom margins of the divider are 0. **DividerStyle**: distance between the divider and the child component above or below it.| 56 57## ColumnSplitDividerStyle<sup>10+</sup> 58 59**Atomic service API**: This API can be used in atomic services since API version 11. 60 61**System capability**: SystemCapability.ArkUI.ArkUI.Full 62 63| Name | Type | Mandatory| Description | 64| ----------- | ------------- | ---- |--------------------------| 65| startMargin | [Dimension](ts-types.md#dimension10) | No | Distance between the divider and the child component above it.<br>Default value: **0**| 66| endMargin | [Dimension](ts-types.md#dimension10) | No | Distance between the divider and the child component below it.<br>Default value: **0**| 67 68> **NOTE** 69> 70> Similar to [RowSplit](ts-container-rowsplit.md#rowsplit), the divider of **ColumnSplit** can change the height of the upper and lower child components, but only to the extent that the resultant height falls within the maximum and minimum heights of the child components. 71> 72> 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. 73 74 75## Example 76 77This example demonstrates the basic usage of **ColumnSplit**, which allows you to create draggable, vertically laid-out child components. 78 79```ts 80// xxx.ets 81@Entry 82@Component 83struct ColumnSplitExample { 84 build() { 85 Column(){ 86 Text('The secant line can be dragged').fontSize(9).fontColor(0xCCCCCC).width('90%') 87 ColumnSplit() { 88 Text('1').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) 89 Text('2').width('100%').height(50).backgroundColor(0xD2B48C).textAlign(TextAlign.Center) 90 Text('3').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) 91 Text('4').width('100%').height(50).backgroundColor(0xD2B48C).textAlign(TextAlign.Center) 92 Text('5').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) 93 } 94 .borderWidth(1) 95 .resizeable(true) // The divider can be dragged. 96 .width('90%').height('60%') 97 }.width('100%') 98 } 99} 100``` 101 102 103
