• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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
9## Child Components
10
11Supported
12
13## APIs
14
15ColumnSplit()
16
17
18## Attributes
19
20| Name                  | Type                                                             | Description                            |
21|-----------------------|-------------------------------------------------------------------|---------------------------------|
22| resizeable            | boolean                                                           | Whether the divider can be dragged.<br/>Default value: **false**  |
23| divider<sup>10+</sup> | [ColumnSplitDividerStyle](#columnsplitdividerstyle10) \| null | Margin of the divider.<br>- **DividerStyle**: distance between the divider and the child component above or below it.<br>- Default value: **null**, indicating that the top and bottom margins of the divider are 0.|
24
25## ColumnSplitDividerStyle<sup>10+</sup>
26
27| Name       | Type     | Mandatory| Description                      |
28| ----------- | ------------- | ---- |--------------------------|
29| startMargin | [Dimension](ts-types.md#dimension10)       | No  | Distance between the divider and the child component above it.<br>Default value: **0**|
30| endMargin   | [Dimension](ts-types.md#dimension10)       | No  | Distance between the divider and the child component below it.<br>Default value: **0**|
31
32>  **NOTE**
33>
34> Similar to **\<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.
35>
36> Universal attributes such as **clip** and **margin** are supported. If **clip** is not set, the default value **true** is used.
37
38
39## Example
40
41```ts
42// xxx.ets
43@Entry
44@Component
45struct ColumnSplitExample {
46  build() {
47    Column(){
48      Text('The secant line can be dragged').fontSize(9).fontColor(0xCCCCCC).width('90%')
49      ColumnSplit() {
50        Text('1').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
51        Text('2').width('100%').height(50).backgroundColor(0xD2B48C).textAlign(TextAlign.Center)
52        Text('3').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
53        Text('4').width('100%').height(50).backgroundColor(0xD2B48C).textAlign(TextAlign.Center)
54        Text('5').width('100%').height(50).backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
55      }
56      .borderWidth(1)
57      .resizeable(true) // The divider can be dragged.
58      .width('90%').height('60%')
59    }.width('100%')
60  }
61}
62```
63
64![en-us_image_0000001219982708](figures/en-us_image_0000001219982708.gif)
65