1# Divider
2
3The **Divider** component is used to separate content blocks and elements.
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
11Not supported
12
13## APIs
14
15Divider()
16
17**Widget capability**: This API can be used in ArkTS widgets since API version 9.
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
25In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
26
27### vertical
28
29vertical(value: boolean)
30
31Sets the direction of the divider.
32
33**Widget capability**: This API can be used in ArkTS widgets since API version 9.
34
35**Atomic service API**: This API can be used in atomic services since API version 11.
36
37**System capability**: SystemCapability.ArkUI.ArkUI.Full
38
39**Parameters**
40
41| Name| Type   | Mandatory| Description                                                        |
42| ------ | ------- | ---- | ------------------------------------------------------------ |
43| value  | boolean | Yes  | Whether the divider is vertical or horizontal.<br>**false**: A horizontal divider is used.<br>**true**: A vertical divider is used.<br>Default value: **false**|
44
45### color
46
47color(value: ResourceColor)
48
49Sets the color of the divider.
50
51**Widget capability**: This API can be used in ArkTS widgets since API version 9.
52
53**Atomic service API**: This API can be used in atomic services since API version 11.
54
55**System capability**: SystemCapability.ArkUI.ArkUI.Full
56
57**Parameters**
58
59| Name| Type                                      | Mandatory| Description                                 |
60| ------ | ------------------------------------------ | ---- | ------------------------------------- |
61| value  | [ResourceColor](ts-types.md#resourcecolor) | Yes  | Color of the divider.<br>Default value: **'\#33182431'**|
62
63### strokeWidth
64
65strokeWidth(value: number | string)
66
67Sets the stroke width of the divider.
68
69**Widget capability**: This API can be used in ArkTS widgets since API version 9.
70
71**Atomic service API**: This API can be used in atomic services since API version 11.
72
73**System capability**: SystemCapability.ArkUI.ArkUI.Full
74
75**Parameters**
76
77| Name| Type                      | Mandatory| Description                                                        |
78| ------ | -------------------------- | ---- | ------------------------------------------------------------ |
79| value  | number \| string | Yes  | Stroke width of the divider.<br>Default value: **1px**<br>Unit: vp<br>**NOTE**<br>This attribute cannot be set to a percentage. The priority of this attribute is lower than that of the universal attribute [height](ts-universal-attributes-size.md#height). If the value of this attribute is greater than that of **height**, cropping is performed based on the **height** settings. Due to hardware limitations on some devices where 1 px dividers may not display properly after rounding, you are advised to use the **2px** value.|
80
81### lineCap
82
83lineCap(value: LineCapStyle)
84
85Sets the cap style of the divider.
86
87**Widget capability**: This API can be used in ArkTS widgets since API version 9.
88
89**Atomic service API**: This API can be used in atomic services since API version 11.
90
91**System capability**: SystemCapability.ArkUI.ArkUI.Full
92
93**Parameters**
94
95| Name| Type                                             | Mandatory| Description                                            |
96| ------ | ------------------------------------------------- | ---- | ------------------------------------------------ |
97| value  | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | Yes  | Cap style of the divider.<br>Default value: **LineCapStyle.Butt**|
98
99
100## Example
101
102```ts
103// xxx.ets
104@Entry
105@Component
106struct DividerExample {
107  build() {
108    Column() {
109      // Use horizontal dividers.
110      Text('Horizontal divider').fontSize(9).fontColor(0xCCCCCC)
111      List() {
112        ForEach([1, 2, 3], (item: number) => {
113          ListItem() {
114            Text('list' + item).width('100%').fontSize(14).fontColor('#182431').textAlign(TextAlign.Start)
115          }.width(244).height(48)
116        }, (item: number) => item.toString())
117      }.padding({ left: 24, bottom: 8 })
118
119      Divider().strokeWidth(8).color('#F1F3F5')
120      List() {
121        ForEach([4, 5], (item: number) => {
122          ListItem() {
123            Text('list' + item).width('100%').fontSize(14).fontColor('#182431').textAlign(TextAlign.Start)
124          }.width(244).height(48)
125        }, (item: number) => item.toString())
126      }.padding({ left: 24, top: 8 })
127
128      // Use vertical dividers.
129      Text('Vertical divider').fontSize(9).fontColor(0xCCCCCC)
130      Column() {
131        Column() {
132          Row().width(288).height(64).backgroundColor('#30C9F0').opacity(0.3)
133          Row() {
134            Button('Button')
135              .width(136)
136              .height(22)
137              .fontSize(16)
138              .fontColor('#007DFF')
139              .fontWeight(500)
140              .backgroundColor(Color.Transparent)
141            Divider().vertical(true).height(22).color('#182431').opacity(0.6).margin({ left: 8, right: 8 })
142            Button('Button')
143              .width(136)
144              .height(22)
145              .fontSize(16)
146              .fontColor('#007DFF')
147              .fontWeight(500)
148              .backgroundColor(Color.Transparent)
149          }.margin({ top: 17 })
150        }
151        .width(336)
152        .height(152)
153        .backgroundColor('#FFFFFF')
154        .borderRadius(24)
155        .padding(24)
156      }
157      .width('100%')
158      .height(168)
159      .backgroundColor('#F1F3F5')
160      .justifyContent(FlexAlign.Center)
161      .margin({ top: 8 })
162    }.width('100%').padding({ top: 24 })
163  }
164}
165```
166
167![en-us_image_0000001174422926](figures/en-us_image_0000001174422926.png)
168