• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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
10## Child Components
11
12Not supported
13
14
15## APIs
16
17Divider()
18
19Since API version 9, this API is supported in ArkTS widgets.
20
21## Attributes
22
23In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
24
25| Name     | Type        | Description       |
26| ----------- | ---------- | ------------------ |
27| vertical    | boolean | Whether a vertical divider is used. **false**: A horizontal divider is used.<br>**true**: A vertical divider is used.<br>Default value: **false**<br>Since API version 9, this API is supported in ArkTS widgets.|
28| color       | [ResourceColor](ts-types.md#resourcecolor) | Color of the divider.<br>Since API version 9, this API is supported in ArkTS widgets.|
29| strokeWidth | number \| string | Width of the divider.<br>Default value: **1**<br>Since API version 9, this API is supported in ArkTS widgets.|
30| lineCap     | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | Cap style of the divider.<br>Default value: **LineCapStyle.Butt**<br>Since API version 9, this API is supported in ArkTS widgets.|
31
32
33## Events
34
35The universal events are not supported.
36
37
38## Example
39
40```ts
41// xxx.ets
42@Entry
43@Component
44struct DividerExample {
45  build() {
46    Column() {
47      // Use horizontal dividers.
48      Text('Horizontal divider').fontSize(9).fontColor(0xCCCCCC)
49      List() {
50        ForEach([1, 2, 3], (item) => {
51          ListItem() {
52            Text('list' + item).width('100%').fontSize(14).fontColor('#182431').textAlign(TextAlign.Start)
53          }.width(244).height(48)
54        }, item => item.toString())
55      }.padding({ left: 24, bottom: 8 })
56
57      Divider().strokeWidth(8).color('#F1F3F5')
58      List() {
59        ForEach([4, 5], (item) => {
60          ListItem() {
61            Text('list' + item).width('100%').fontSize(14).fontColor('#182431').textAlign(TextAlign.Start)
62          }.width(244).height(48)
63        }, item => item.toString())
64      }.padding({ left: 24, top: 8 })
65
66      // Use vertical dividers.
67      Text('Vertical divider').fontSize(9).fontColor(0xCCCCCC)
68      Column() {
69        Column() {
70          Row().width(288).height(64).backgroundColor('#30C9F0').opacity(0.3)
71          Row() {
72            Button('Button')
73              .width(136)
74              .height(22)
75              .fontSize(16)
76              .fontColor('#007DFF')
77              .fontWeight(500)
78              .backgroundColor(Color.Transparent)
79            Divider().vertical(true).height(22).color('#182431').opacity(0.6).margin({ left: 8, right: 8 })
80            Button('Button')
81              .width(136)
82              .height(22)
83              .fontSize(16)
84              .fontColor('#007DFF')
85              .fontWeight(500)
86              .backgroundColor(Color.Transparent)
87          }.margin({ top: 17 })
88        }
89        .width(336)
90        .height(152)
91        .backgroundColor('#FFFFFF')
92        .borderRadius(24)
93        .padding(24)
94      }
95      .width('100%')
96      .height(168)
97      .backgroundColor('#F1F3F5')
98      .justifyContent(FlexAlign.Center)
99      .margin({ top: 8 })
100    }.width('100%').padding({ top: 24 })
101  }
102}
103```
104
105![en-us_image_0000001174422926](figures/en-us_image_0000001174422926.png)
106