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-component-general-attributes.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'**<br>You can set a common divider color using [WithTheme](ts-container-with-theme.md#withtheme).| 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 102This example demonstrates how to define the style of a divider, including its direction, color, and width. 103 104```ts 105// xxx.ets 106@Entry 107@Component 108struct DividerExample { 109 build() { 110 Column() { 111 // Use horizontal dividers. 112 Text('Horizontal divider').fontSize(9).fontColor(0xCCCCCC) 113 List() { 114 ForEach([1, 2, 3], (item: number) => { 115 ListItem() { 116 Text('list' + item).width('100%').fontSize(14).fontColor('#182431').textAlign(TextAlign.Start) 117 }.width(244).height(48) 118 }, (item: number) => item.toString()) 119 }.padding({ left: 24, bottom: 8 }) 120 121 Divider().strokeWidth(8).color('#F1F3F5') 122 List() { 123 ForEach([4, 5], (item: number) => { 124 ListItem() { 125 Text('list' + item).width('100%').fontSize(14).fontColor('#182431').textAlign(TextAlign.Start) 126 }.width(244).height(48) 127 }, (item: number) => item.toString()) 128 }.padding({ left: 24, top: 8 }) 129 130 // Use vertical dividers. 131 Text('Vertical divider').fontSize(9).fontColor(0xCCCCCC) 132 Column() { 133 Column() { 134 Row().width(288).height(64).backgroundColor('#30C9F0').opacity(0.3) 135 Row() { 136 Button('Button') 137 .width(136) 138 .height(22) 139 .fontSize(16) 140 .fontColor('#007DFF') 141 .fontWeight(500) 142 .backgroundColor(Color.Transparent) 143 Divider().vertical(true).height(22).color('#182431').opacity(0.6).margin({ left: 8, right: 8 }) 144 Button('Button') 145 .width(136) 146 .height(22) 147 .fontSize(16) 148 .fontColor('#007DFF') 149 .fontWeight(500) 150 .backgroundColor(Color.Transparent) 151 }.margin({ top: 17 }) 152 } 153 .width(336) 154 .height(152) 155 .backgroundColor('#FFFFFF') 156 .borderRadius(24) 157 .padding(24) 158 } 159 .width('100%') 160 .height(168) 161 .backgroundColor('#F1F3F5') 162 .justifyContent(FlexAlign.Center) 163 .margin({ top: 8 }) 164 }.width('100%').padding({ top: 24 }) 165 } 166} 167``` 168 169 170
