1# Outline 2 3You can set outline attributes for components. Drawn outside the component, the outline does not affect the component's layout or increases its size. 4 5 6 7> **NOTE** 8> 9> This feature is supported since API version 11. Updates will be marked with a superscript to indicate their earliest API version. 10 11## outline 12 13outline(value: OutlineOptions) 14 15Sets the outline attributes in one declaration. 16 17**Widget capability**: This API can be used in ArkTS widgets since API version 11. 18 19**Atomic service API**: This API can be used in atomic services since API version 12. 20 21**System capability**: SystemCapability.ArkUI.ArkUI.Full 22 23**Parameters** 24 25| Name| Type | Mandatory| Description | 26| ------ | ----------------------------------------- | ---- | ------------ | 27| value | [OutlineOptions](#outlineoptions) | Yes | Outline attributes.| 28 29## outline<sup>18+</sup> 30 31outline(options: Optional\<OutlineOptions>) 32 33Sets the outline attributes in one declaration. Compared to [outline](#outline), this API supports the **undefined** type for the **options** parameter. 34 35**Widget capability**: This API can be used in ArkTS widgets since API version 18. 36 37**Atomic service API**: This API can be used in atomic services since API version 18. 38 39**System capability**: SystemCapability.ArkUI.ArkUI.Full 40 41**Parameters** 42 43| Name| Type | Mandatory| Description| 44| ------ | ----------------------------------------- | ---- | ---- | 45| options | Optional\<[OutlineOptions](#outlineoptions)> | Yes | Outline attributes.<br>If **options** is **undefined**, the component reverts to its original style with no outline. | 46 47## OutlineStyle<sup>11+</sup> 48 49Outline attributes. 50 51**Widget capability**: This API can be used in ArkTS widgets since API version 11. 52 53**Atomic service API**: This API can be used in atomic services since API version 12. 54 55**System capability**: SystemCapability.ArkUI.ArkUI.Full 56 57| Name | Description | 58| ------ | ----------------------------- | 59| SOLID | Solid border. | 60| DASHED | Dashed border. | 61| DOTTED | Dotted border. The radius of a dot is half of **outlineWidth**.| 62 63## outlineStyle 64 65outlineStyle(value: OutlineStyle | EdgeOutlineStyles) 66 67Sets the style of the outline. 68 69**Widget capability**: This API can be used in ArkTS widgets since API version 11. 70 71**Atomic service API**: This API can be used in atomic services since API version 12. 72 73**System capability**: SystemCapability.ArkUI.ArkUI.Full 74 75**Parameters** 76 77| Name| Type | Mandatory| Description | 78| ------ | ------------------------------------------------------------ | ---- | ----------------------------------------------------- | 79| value | [OutlineStyle](#outlinestyle11) \| [EdgeOutlineStyles](#edgeoutlinestyles) | Yes | Outline style.<br>Default value: **OutlineStyle.SOLID**| 80 81## outlineStyle<sup>18+</sup> 82 83outlineStyle(style: Optional\<OutlineStyle | EdgeOutlineStyles>) 84 85Sets the style of the outline. Compared to [outlineStyle](#outlinestyle), this API supports the **undefined** type for the **style** parameter. 86 87**Widget capability**: This API can be used in ArkTS widgets since API version 18. 88 89**Atomic service API**: This API can be used in atomic services since API version 18. 90 91**System capability**: SystemCapability.ArkUI.ArkUI.Full 92 93**Parameters** 94 95| Name| Type | Mandatory| Description | 96| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 97| style | Optional\<[OutlineStyle](#outlinestyle11) \| [EdgeOutlineStyles](#edgeoutlinestyles)> | Yes | Outline style.<br>Default value: **OutlineStyle.SOLID**<br>If **style** is **undefined**, the component reverts to its original style with no outline.| 98 99## outlineWidth 100 101outlineWidth(value: Dimension | EdgeOutlineWidths) 102 103Sets the thickness of the outline. 104 105**Widget capability**: This API can be used in ArkTS widgets since API version 11. 106 107**Atomic service API**: This API can be used in atomic services since API version 12. 108 109**System capability**: SystemCapability.ArkUI.ArkUI.Full 110 111**Parameters** 112 113| Name| Type | Mandatory| Description | 114| ------ | ------------------------------------------------------------ | ---- | ----------------------------------------------------- | 115| value | [Dimension](ts-types.md#dimension10) \| [EdgeOutlineWidths](#edgeoutlinewidths) | Yes | Outline thickness. Percentage values are not supported.<br>Default value: **0**| 116 117## outlineWidth<sup>18+</sup> 118 119outlineWidth(width: Optional\<Dimension | EdgeOutlineWidths>) 120 121Sets the thickness of the outline. Compared to [[outlineWidth](#outlinewidth), this API supports the **undefined** type for the **width** parameter. 122 123**Widget capability**: This API can be used in ArkTS widgets since API version 18. 124 125**Atomic service API**: This API can be used in atomic services since API version 18. 126 127**System capability**: SystemCapability.ArkUI.ArkUI.Full 128 129**Parameters** 130 131| Name| Type | Mandatory| Description | 132| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 133| width | Optional\<[Dimension](ts-types.md#dimension10) \| [EdgeOutlineWidths](#edgeoutlinewidths)> | Yes | Outline thickness. Percentage values are not supported.<br>Default value: **0**<br>If **width** is **undefined**, the component reverts to its original style with no outline width.| 134 135## outlineColor 136 137outlineColor(value: ResourceColor | EdgeColors) 138 139Sets the color of the outline. 140 141**Widget capability**: This API can be used in ArkTS widgets since API version 11. 142 143**Atomic service API**: This API can be used in atomic services since API version 12. 144 145**System capability**: SystemCapability.ArkUI.ArkUI.Full 146 147**Parameters** 148 149| Name| Type | Mandatory| Description | 150| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------ | 151| value | [ResourceColor](ts-types.md#resourcecolor) \| [EdgeColors](#edgecolors) | Yes | Outline color.<br>Default value: **Color.Black**| 152 153## outlineColor<sup>18+</sup> 154 155outlineColor(color: Optional\<ResourceColor | EdgeColors>) 156 157Sets the color of the outline. Compared to [outlineColor](#outlinecolor), this API supports the **undefined** type for the **color** parameter. 158 159**Widget capability**: This API can be used in ArkTS widgets since API version 18. 160 161**Atomic service API**: This API can be used in atomic services since API version 18. 162 163**System capability**: SystemCapability.ArkUI.ArkUI.Full 164 165**Parameters** 166 167| Name| Type | Mandatory| Description | 168| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 169| color | Optional\<[ResourceColor](ts-types.md#resourcecolor) \| [EdgeColors](#edgecolors)> | Yes | Outline color.<br>Default value: **Color.Black**<br>If **color** is **undefined**, the component reverts to its original style with the outline color of **Color.Black**.| 170 171## outlineRadius 172 173outlineRadius(value: Dimension | OutlineRadiuses) 174 175Sets the radius of the outline corners. 176 177**Widget capability**: This API can be used in ArkTS widgets since API version 11. 178 179**Atomic service API**: This API can be used in atomic services since API version 12. 180 181**System capability**: SystemCapability.ArkUI.ArkUI.Full 182 183**Parameters** 184 185| Name| Type | Mandatory| Description | 186| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 187| value | [Dimension](ts-types.md#dimension10) \| [OutlineRadiuses](#outlineradiuses) | Yes | Radius of the outline corners. Percentage values are not supported.<br>Default value: **0**<br>Maximum effective value: Component width/2 + outlineWidth or component height/2 + outlineWidth| 188 189## outlineRadius<sup>18+</sup> 190 191outlineRadius(radius: Optional\<Dimension | OutlineRadiuses>) 192 193Sets the radius of the outline corners. Compared to [outlineRadius](#outlineradius), this API supports the **undefined** type for the **radius** parameter. 194 195**Widget capability**: This API can be used in ArkTS widgets since API version 18. 196 197**Atomic service API**: This API can be used in atomic services since API version 18. 198 199**System capability**: SystemCapability.ArkUI.ArkUI.Full 200 201**Parameters** 202 203| Name| Type | Mandatory| Description | 204| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 205| radius | Optional\<[Dimension](ts-types.md#dimension10) \| [OutlineRadiuses](#outlineradiuses)> | Yes | Radius of the outline corners. Percentage values are not supported.<br>Default value: **0**<br>Maximum effective value: Component width/2 + outlineWidth or component height/2 + outlineWidth<br>If **radius** is **undefined**, the component reverts to its original style with the outline corner radius of 0.| 206 207## OutlineOptions 208 209**Atomic service API**: This API can be used in atomic services since API version 12. 210 211**Widget capability**: This API can be used in ArkTS widgets since API version 12. 212 213| Name | Type |Mandatory | Description | 214| ------ | ----------------------|-------------------------------------- | ------------------------------------------------------------ | 215| width | [Dimension](ts-types.md#dimension10) \| [EdgeOutlineWidths](#edgeoutlinewidths) | No| Outline thickness. Percentage values are not supported.<br>Default value: **0**| 216| color | [ResourceColor](ts-types.md#resourcecolor) \| [EdgeColors](#edgecolors) \| [LocalizedEdgeColors](#localizededgecolors12)<sup>12+</sup> |No| Outline color.<br>Default value: **Color.Black** | 217| radius | [Dimension](ts-types.md#dimension10) \| [OutlineRadiuses](#outlineradiuses) | No| Radius of the outline corners. Percentage values are not supported.<br>Default value: **0**<br>Maximum effective value: Component width/2 + outlineWidth or component height/2 + outlineWidth| 218| style | [OutlineStyle](#outlinestyle11) \| [EdgeOutlineStyles](#edgeoutlinestyles) |No| Outline style.<br>Default value: **OutlineStyle.SOLID** | 219 220## EdgeOutlineWidths 221 222To reference this object, at least one parameter must be passed. 223 224**Atomic service API**: This API can be used in atomic services since API version 12. 225 226**Widget capability**: This API can be used in ArkTS widgets since API version 12. 227 228| Name | Type | Mandatory | Description | 229| ------ | ---------------------------- | ---- | ------- | 230| left | [Dimension](ts-types.md#dimension10) | No | Thickness of the left outline.| 231| right | [Dimension](ts-types.md#dimension10) | No | Thickness of the right outline.| 232| top | [Dimension](ts-types.md#dimension10) | No | Thickness of the top outline.| 233| bottom | [Dimension](ts-types.md#dimension10) | No | Thickness of the bottom outline.| 234 235## EdgeColors 236 237To reference this object, at least one parameter must be passed. 238 239**Atomic service API**: This API can be used in atomic services since API version 11. 240 241**System capability**: SystemCapability.ArkUI.ArkUI.Full 242 243**Widget capability**: This API can be used in ArkTS widgets since API version 12. 244 245| Name | Type | Mandatory | Description | 246| ------ | ---------------------------------------- | ---- | ------- | 247| left | [ResourceColor](ts-types.md#resourcecolor) | No | Color of the left outline.| 248| right | [ResourceColor](ts-types.md#resourcecolor) | No | Color of the right outline.| 249| top | [ResourceColor](ts-types.md#resourcecolor) | No | Color of the top outline.| 250| bottom | [ResourceColor](ts-types.md#resourcecolor) | No | Color of the bottom outline.| 251 252## LocalizedEdgeColors<sup>12+</sup> 253 254To reference this object, at least one parameter must be passed. 255 256**Atomic service API**: This API can be used in atomic services since API version 12. 257 258**Widget capability**: This API can be used in ArkTS widgets since API version 12. 259 260| Name | Type | Mandatory | Description | 261| ------ | ---------------------------------------- | ---- | ------- | 262| start | [ResourceColor](ts-types.md#resourcecolor) | No | Color of the left outline.<br>For right-to-left scripts, this indicates the color of the right outline.| 263| end | [ResourceColor](ts-types.md#resourcecolor) | No | Color of the right outline.<br>For right-to-left scripts, this indicates the color of the left outline.| 264| top | [ResourceColor](ts-types.md#resourcecolor) | No | Color of the top outline.| 265| bottom | [ResourceColor](ts-types.md#resourcecolor) | No | Color of the bottom outline.| 266 267## OutlineRadiuses 268 269To reference this object, at least one parameter must be passed. 270 271**Atomic service API**: This API can be used in atomic services since API version 12. 272 273**Widget capability**: This API can be used in ArkTS widgets since API version 12. 274 275| Name | Type | Mandatory | Description | 276| ----------- | ---------------------------- | ---- | -------- | 277| topLeft | [Dimension](ts-types.md#dimension10) | No | Radius of the upper-left corner.| 278| topRight | [Dimension](ts-types.md#dimension10) | No | Radius of the upper-right corner.| 279| bottomLeft | [Dimension](ts-types.md#dimension10) | No | Radius of the lower-left corner.| 280| bottomRight | [Dimension](ts-types.md#dimension10) | No | Radius of the lower-right corner.| 281 282## EdgeOutlineStyles 283 284To reference this object, at least one parameter must be passed. 285 286**Atomic service API**: This API can be used in atomic services since API version 12. 287 288**Widget capability**: This API can be used in ArkTS widgets since API version 12. 289 290| Name | Type | Mandatory | Description | 291| ------ | ---------------------------------------- | ---- | ------- | 292| left | [OutlineStyle](#outlinestyle11) | No | Style of the left outline.| 293| right | [OutlineStyle](#outlinestyle11) | No | Style of the right outline.| 294| top | [OutlineStyle](#outlinestyle11) | No | Style of the top outline.| 295| bottom | [OutlineStyle](#outlinestyle11) | No | Style of the bottom outline.| 296 297## Example 298 299### Example 1: Creating Outlines 300 301This example demonstrates how to create component outlines using **outline**. 302 303```ts 304// xxx.ets 305@Entry 306@Component 307struct OutlineExample { 308 build() { 309 Column() { 310 Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) { 311 // Dashed line 312 Text('DASHED') 313 .backgroundColor(Color.Pink) 314 .outlineStyle(OutlineStyle.DASHED).outlineWidth(5).outlineColor(0xAFEEEE).outlineRadius(10) 315 .width(120).height(120).textAlign(TextAlign.Center).fontSize(16) 316 // Dotted line 317 Text('DOTTED') 318 .backgroundColor(Color.Pink) 319 .outline({ width: 5, color: 0x317AF7, radius: 10, style: OutlineStyle.DOTTED }) 320 .width(120).height(120).textAlign(TextAlign.Center).fontSize(16) 321 }.width('100%').height(150) 322 323 Text('.outline') 324 .backgroundColor(Color.Pink) 325 .fontSize(50) 326 .width(300) 327 .height(300) 328 .outline({ 329 width: { left: 3, right: 6, top: 10, bottom: 15 }, 330 color: { left: '#e3bbbb', right: Color.Blue, top: Color.Red, bottom: Color.Green }, 331 radius: { topLeft: 10, topRight: 20, bottomLeft: 40, bottomRight: 80 }, 332 style: { 333 left: OutlineStyle.DOTTED, 334 right: OutlineStyle.DOTTED, 335 top: OutlineStyle.SOLID, 336 bottom: OutlineStyle.DASHED 337 } 338 }).textAlign(TextAlign.Center) 339 } 340 } 341} 342``` 343 344 345 346### Example 2: Using the LocalizedEdgeColors Type 347 348This example sets the **color** property of the **outline** attribute to the LocalizedEdgeColors type. 349 350```ts 351// xxx.ets 352 353@Entry 354@Component 355struct OutlineExample { 356 build() { 357 Column() { 358 Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) { 359 // Dashed line 360 Text('DASHED') 361 .backgroundColor(Color.Pink) 362 .outlineStyle(OutlineStyle.DASHED).outlineWidth(5).outlineColor(0xAFEEEE).outlineRadius(10) 363 .width(120).height(120).textAlign(TextAlign.Center).fontSize(16) 364 // Dotted line 365 Text('DOTTED') 366 .backgroundColor(Color.Pink) 367 .outline({ width: 5, color: 0x317AF7, radius: 10, style: OutlineStyle.DOTTED }) 368 .width(120).height(120).textAlign(TextAlign.Center).fontSize(16) 369 }.width('100%').height(150) 370 371 Text('.outline') 372 .backgroundColor(Color.Pink) 373 .fontSize(50) 374 .width(300) 375 .height(300) 376 .outline({ 377 width: { left: 3, right: 6, top: 10, bottom: 15 }, 378 color: { start: '#e3bbbb', end: Color.Blue, top: Color.Red, bottom: Color.Green }, 379 radius: { topLeft: 10, topRight: 20, bottomLeft: 40, bottomRight: 80 }, 380 style: { 381 left: OutlineStyle.DOTTED, 382 right: OutlineStyle.DOTTED, 383 top: OutlineStyle.SOLID, 384 bottom: OutlineStyle.DASHED 385 } 386 }).textAlign(TextAlign.Center) 387 } 388 } 389} 390``` 391 392The following shows how the example is represented with left-to-right scripts. 393 394 395 396The following shows how the example is represented with right-to-left scripts. 397 398 399
