1# Location 2 3The location attributes set the alignment mode, layout direction, and position of a component. 4 5> **NOTE** 6> 7> The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. 8 9## align 10 11align(value: Alignment) 12 13Sets the alignment mode of the component content in the drawing area. 14 15**Widget capability**: This API can be used in ArkTS widgets since API version 9. 16 17**Atomic service API**: This API can be used in atomic services since API version 11. 18 19**System capability**: SystemCapability.ArkUI.ArkUI.Full 20 21**Parameters** 22 23| Name| Type | Mandatory| Description | 24| ------ | ------------------------------------------- | ---- | ------------------------------------------------------------ | 25| value | [Alignment](ts-appendix-enums.md#alignment) | Yes | Sets the alignment mode of the component content in the drawing area.<br>This attribute is available only in the following components: **\<Stack>**, **\<Button>**, **\<StepperItem>**,**\<FolderStack>**, **\<Marquee>**, **\<Text>**, **\<TextArea>**, and **\<TextInput>**. For details about the alignment results of text-related components (the last four aforementioned components), see [textAlign](ts-basic-components-text.md#attributes).<br>If the component does not support the **textAlign** attribute, horizontal alignment cannot be set for text.<br>Default value: **Alignment.Center**<br>**NOTE**<br>In the **\<Stack>** component, this attribute has the same effect as **alignContent**, which means that it sets the alignment mode of child components in the container.| 26 27## direction 28 29direction(value: Direction) 30 31Sets how elements are laid out along the main axis of the container. 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 | [Direction](ts-appendix-enums.md#direction) | Yes | How elements are laid out along the main axis of the container.<br>If this parameter is set to **auto**, the layout is subject to the system language.<br>The attribute does not take effect in the **\<Column>** component.<br>Default value: **Direction.Auto**| 44 45## position 46 47position(value: Position | Edges | LocalizedEdges) 48 49Sets the absolute position of the component relative to the position of the parent component. 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 | [Position](ts-types.md#position) \| [Edges<sup>12+</sup>](ts-types.md#edges12) \| [LocalizedEdges<sup>12+</sup>](ts-types.md#localizededges12) | Yes | Absolute position of the component relative to the position of the parent component. If the parent container is **\<Row>**, **\<Column>**, or **\<Flex>**, the child component for which **position** is set does not take up space in the container.<br>If of the Position type, this parameter sets the position based on the upper left corner of the parent component. If of the Edges type, this parameter sets the position based on the offset relative to the four edges of the parent component. If of the LocalizedEdges type, this parameter sets the position based on the offset relative to the four edges of the parent component, with support for the mirror mode.<br>The **position** attribute is applicable to scenarios where the component's position in the parent container is fixed, for example, where it is pinned to top or floating on the UI.<br>The attribute is not available for a layout container whose width and height are zero.<br>The attribute does not take effect when the component is in a [\<RelativeContainer>](ts-container-relativecontainer.md) component and with the **alignRules** attribute set.| 62 63## markAnchor 64 65markAnchor(value: Position | LocalizedPosition) 66 67Sets the anchor for locating the component. 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 | [Position](ts-types.md#position) \| [LocalizedPosition<sup>12+</sup>](ts-types.md#localizedposition12) | Yes | Anchor for locating the component, which is used to move the component further away from the position specified by **position** or **offset**.<br>**.position({x: value1, y: value2}).markAnchor({x: value3, y: value4})** has the same effect as **.position({x: value1 - value3, y: value2 - value4})**. The same applies to **offset**.<br>When **markAnchor** is used alone, **markAnchor ({x: value1, y: value2})** has the same effect as **.offset ({x: -value1, y: -value2})**.<br>The default value varies by API version.<br>API version 9 and earlier:<br>{<br>x: 0,<br>y: 0<br>}<br>API version 10: none| 80 81## offset 82 83offset(value: Position | Edges | LocalizedEdges) 84 85Sets the offset of the component relative to its original position. 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 | [Position](ts-types.md#position) \| [Edges<sup>12+</sup>](ts-types.md#edges12) \| [LocalizedEdges<sup>12+</sup>](ts-types.md#localizededges12) | Yes | Offset of the component relative to its original position. The **offset** attribute does not affect the layout of the parent container. It adjusts the component position only during drawing.<br>If of the Position type, this parameter sets the offset relative to the upper left corner of the component. If of the Edges type, this parameter sets the offset relative to the four edges of the component. **{x: x, y: y}** has the same effect as **{left: x, top: y}** and **{right: -x, bottom: -y}**. The LocalizedEdges type supports the mirror mode: **start** is equivalent to **x** with left-to-right scripts and **-x** with right-to-left scripts.<br>The default value varies by API version.<br>API version 9 and earlier:<br>{<br>x: 0,<br>y: 0<br>}<br>API version 10: none| 98 99## alignRules<sup>9+</sup> 100 101alignRules(value: AlignRuleOption) 102 103Sets the alignment rules in the relative container. This API is valid only when the container is [\<RelativeContainer>](ts-container-relativecontainer.md). 104 105**Widget capability**: This API can be used in ArkTS widgets since API version 9. 106 107**Atomic service API**: This API can be used in atomic services since API version 11. 108 109**System capability**: SystemCapability.ArkUI.ArkUI.Full 110 111**Parameters** 112 113| Name| Type | Mandatory| Description | 114| ------ | ------------------------------------------- | ---- | ------------------------ | 115| value | [AlignRuleOption](#alignruleoption) | Yes | Alignment rules in the relative container.| 116 117## alignRules<sup>12+</sup> 118 119alignRules(alignRule: LocalizedAlignRuleOptions) 120 121Sets the alignment rules in the relative container. This API is valid only when the container is [\<RelativeContainer>](ts-container-relativecontainer.md). This API takes the right-to-left scripts into account, using **start** and **end** instead of **left** and **right** for alignment in the horizontal direction. Prioritize this API in aligning child components in the relative container. 122 123**Widget capability**: This API can be used in ArkTS widgets since API version 12. 124 125**Atomic service API**: This API can be used in atomic services since API version 12. 126 127**System capability**: SystemCapability.ArkUI.ArkUI.Full 128 129**Parameters** 130 131| Name| Type | Mandatory| Description | 132| ------ | ------------------------------------------- | ---- | ------------------------ | 133| alignRule | [LocalizedAlignRuleOptions](#localizedalignruleoptions12) | Yes | Alignment rules in the relative container.| 134 135## AlignRuleOption 136 137**Widget capability**: This API can be used in ArkTS widgets since API version 9. 138 139| Name | Type | Description | 140| ------ | ------------------------------------------------------------ | ------------------------------------------------------------ | 141| left | { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) } | Left alignment.<br>- **anchor**: ID of the component that functions as the anchor point.<br>- **align**: alignment mode relative to the anchor component.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 142| right | { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) } | Right alignment.<br>- **anchor**: ID of the component that functions as the anchor point.<br>- **align**: alignment mode relative to the anchor component.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 143| middle | { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) } | Horizontal center alignment.<br>- **anchor**: ID of the component that functions as the anchor point.<br>- **align**: alignment mode relative to the anchor component.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 144| top | { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) } | Top alignment.<br>- **anchor**: ID of the component that functions as the anchor point.<br>- **align**: alignment mode relative to the anchor component.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 145| bottom | { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) } | Bottom alignment.<br>- **anchor**: ID of the component that functions as the anchor point.<br>- **align**: alignment mode relative to the anchor component.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 146| center | { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) } | Vertical center alignment.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 147| bias<sup>11+</sup> | [Bias](#bias) | Offset of the component under the anchor constraints. The value is the ratio of the distance to the left/upper anchor to the total distance between anchors.<br>**Widget capability**: This API can be used in ArkTS widgets since API version 11.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 148 149## LocalizedAlignRuleOptions<sup>12+</sup> 150 151**Atomic service API**: This API can be used in atomic services since API version 12. 152 153| Name | Type | Description | 154| ------ | ------------------------------------------------------------ | ------------------------------------------------------------ | 155| start | [LocalizedHorizontalAlignParam](#localizedhorizontalalignparam12) | Left alignment with left-to-right scripts and right alignment with right-to-left scripts in the horizontal direction.| 156| end | [LocalizedHorizontalAlignParam](#localizedhorizontalalignparam12) | Right alignment with left-to-right scripts and left alignment with right-to-left scripts in the horizontal direction.| 157| middle | [LocalizedHorizontalAlignParam](#localizedhorizontalalignparam12) | Center alignment in the horizontal direction.| 158| top | [LocalizedVerticalAlignParam](#localizedverticalalignparam12) | Top alignment in the vertical direction.| 159| bottom | [LocalizedVerticalAlignParam](#localizedverticalalignparam12) | Bottom alignment in the vertical direction.| 160| center | [LocalizedVerticalAlignParam](#localizedverticalalignparam12) | Center alignment in the vertical direction. | 161| bias | [Bias](#bias) | Offset of the component under the anchor constraints. The value is the ratio of the distance to the left/upper anchor to the total distance between anchors.| 162 163## LocalizedHorizontalAlignParam<sup>12+</sup> 164 165**Atomic service API**: This API can be used in atomic services since API version 12. 166 167| Name | Type | Description | 168| ------ | ------------------------------------------------------------ | ------------------------------------------------------------ | 169| anchor | string | ID of the component that serves as the anchor.| 170| align | [HorizontalAlign](ts-appendix-enums.md#horizontalalign) | Horizontal alignment mode relative to the anchor component.| 171 172## LocalizedVerticalAlignParam<sup>12+</sup> 173 174**Atomic service API**: This API can be used in atomic services since API version 12. 175 176| Name | Type | Description | 177| ------ | ------------------------------------------------------------ | ------------------------------------------------------------ | 178| anchor | string | ID of the component that serves as the anchor.| 179| align | [VerticalAlign](ts-appendix-enums.md#verticalalign) | Vertical alignment mode relative to the anchor component.| 180 181## Bias 182 183**Atomic service API**: This API can be used in atomic services since API version 12. 184 185| Name | Type | Mandatory | Description | 186| ----- | ---------------------------------------- | ---- | ---------------------------------------- | 187| horizontal | number | No| Bias value in the horizontal direction.<br>This parameter takes effect when the child component has a determinable width and two horizontal anchors.<br>Default value: **0.5**| 188| vertical | number | No| Bias value in the vertical direction.<br>This parameter takes effect when the child component has a determinable height and two vertical anchors.<br>Default value: **0.5**| 189 190## chainMode<sup>12+</sup> 191 192chainMode(direction: Axis, style: ChainStyle) 193 194Sets the parameters of the chain in which the component is the head. This parameter has effect only when the parent container is [\<RelativeContainer>](ts-container-relativecontainer.md). 195 196**System capability**: SystemCapability.ArkUI.ArkUI.Full 197 198**Parameters** 199 200| Name| Type | Mandatory| Description | 201| ------ | ------------------------------------------- | ---- | ------------------------ | 202| direction | [Axis](ts-appendix-enums.md#axis) | Yes | Direction of the chain.| 203| style | [ChainStyle](ts-appendix-enums.md#chainstyle12) | Yes | Style of the chain.| 204 205## Example 206### Example 1 207```ts 208// xxx.ets 209@Entry 210@Component 211struct PositionExample1 { 212 build() { 213 Column() { 214 Column({ space: 10 }) { 215 // When the component content is within the area specified by the component width and height, set the alignment mode of the content in the component. 216 Text('align').fontSize(9).fontColor(0xCCCCCC).width('90%') 217 Stack() { 218 Text('First show in bottom end').height('65%').backgroundColor(0xD2B48C) 219 Text('Second show in bottom end').backgroundColor(0xF5DEB3).opacity(0.9) 220 }.width('90%').height(50).margin({ top: 5 }).backgroundColor(0xFFE4C4) 221 .align(Alignment.BottomEnd) 222 Stack() { 223 Text('top start') 224 }.width('90%').height(50).margin({ top: 5 }).backgroundColor(0xFFE4C4) 225 .align(Alignment.TopStart) 226 227 // To arrange the child components from left to right, set direction of the parent container to Direction.Ltr. 228 Text('direction').fontSize(9).fontColor(0xCCCCCC).width('90%') 229 Row() { 230 Text('1').height(50).width('25%').fontSize(16).backgroundColor(0xF5DEB3) 231 Text('2').height(50).width('25%').fontSize(16).backgroundColor(0xD2B48C) 232 Text('3').height(50).width('25%').fontSize(16).backgroundColor(0xF5DEB3) 233 Text('4').height(50).width('25%').fontSize(16).backgroundColor(0xD2B48C) 234 } 235 .width('90%') 236 .direction(Direction.Ltr) 237 // To arrange the child components from right to left, set direction of the parent container to Direction.Rtl. 238 Row() { 239 Text('1').height(50).width('25%').fontSize(16).backgroundColor(0xF5DEB3).textAlign(TextAlign.End) 240 Text('2').height(50).width('25%').fontSize(16).backgroundColor(0xD2B48C).textAlign(TextAlign.End) 241 Text('3').height(50).width('25%').fontSize(16).backgroundColor(0xF5DEB3).textAlign(TextAlign.End) 242 Text('4').height(50).width('25%').fontSize(16).backgroundColor(0xD2B48C).textAlign(TextAlign.End) 243 } 244 .width('90%') 245 .direction(Direction.Rtl) 246 } 247 } 248 .width('100%').margin({ top: 5 }) 249 } 250} 251``` 252 253 254 255### Example 2 256```ts 257// xxx.ets 258@Entry 259@Component 260struct PositionExample2 { 261 build() { 262 Column({ space: 20 }) { 263 // Set the offset of the component's upper left corner relative to the parent component's upper left corner. 264 Text('position').fontSize(12).fontColor(0xCCCCCC).width('90%') 265 Row() { 266 Text('1').size({ width: '30%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) 267 .textAlign(TextAlign.Center) 268 Text('2 position(30, 10)') 269 .size({ width: '60%', height: '30' }) 270 .backgroundColor(0xbbb2cb) 271 .border({ width: 1 }) 272 .fontSize(16) 273 .align(Alignment.Start) 274 .position({ x: 30, y: 10 }) 275 Text('3').size({ width: '45%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) 276 .textAlign(TextAlign.Center) 277 Text('4 position(50%, 70%)') 278 .size({ width: '50%', height: '50' }) 279 .backgroundColor(0xbbb2cb) 280 .border({ width: 1 }) 281 .fontSize(16) 282 .position({ x: '50%', y: '70%' }) 283 }.width('90%').height(100).border({ width: 1, style: BorderStyle.Dashed }) 284 285 // Offset relative to the start point. x indicates the horizontal distance between the end point and the start point. If the value of x is greater than 0, the component is offset to the left. Otherwise, the component is offset to the right. 286 // y indicates the vertical distance between the end point and the start point. If the value of y is greater than 0, the component is offset to the top. Otherwise, the component is offset to the bottom. 287 Text('markAnchor').fontSize(12).fontColor(0xCCCCCC).width('90%') 288 Stack({ alignContent: Alignment.TopStart }) { 289 Row() 290 .size({ width: '100', height: '100' }) 291 .backgroundColor(0xdeb887) 292 Text('text') 293 .fontSize('30px') 294 .textAlign(TextAlign.Center) 295 .size({ width: 25, height: 25 }) 296 .backgroundColor(Color.Green) 297 .markAnchor({ x: 25, y: 25 }) 298 Text('text') 299 .fontSize('30px') 300 .textAlign(TextAlign.Center) 301 .size({ width: 25, height: 25 }) 302 .backgroundColor(Color.Green) 303 .markAnchor({ x: -100, y: -25 }) 304 Text('text') 305 .fontSize('30px') 306 .textAlign(TextAlign.Center) 307 .size({ width: 25, height: 25 }) 308 .backgroundColor(Color.Green) 309 .markAnchor({ x: 25, y: -25 }) 310 }.margin({ top: 25 }).border({ width: 1, style: BorderStyle.Dashed }) 311 312 // Offset of the component relative to itself. If the value of x is greater than 0, the component is offset to the right. Otherwise, the component is offset to the left. If the value of y is greater than 0, the component is offset to the bottom. Otherwise, the component is offset to the top. 313 Text('offset').fontSize(12).fontColor(0xCCCCCC).width('90%') 314 Row() { 315 Text('1').size({ width: '15%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) 316 .textAlign(TextAlign.Center) 317 Text('2 offset(15, 30)') 318 .size({ width: 120, height: '50' }) 319 .backgroundColor(0xbbb2cb) 320 .border({ width: 1 }) 321 .fontSize(16) 322 .align(Alignment.Start) 323 .offset({ x: 15, y: 30 }) 324 Text('3').size({ width: '15%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) 325 .textAlign(TextAlign.Center) 326 Text('4 offset(-5%, 20%)') 327 .size({ width: 100, height: '50' }) 328 .backgroundColor(0xbbb2cb) 329 .border({ width: 1 }) 330 .fontSize(16) 331 .offset({ x: '-5%', y: '20%' }) 332 }.width('90%').height(100).border({ width: 1, style: BorderStyle.Dashed }) 333 } 334 .width('100%').margin({ top: 25 }) 335 } 336} 337``` 338 339 340 341### Example 3 342```ts 343// xxx.ets 344@Entry 345@Component 346struct Example3 { 347 build() { 348 Column({ space: 20 }){ 349 Text('position use Edges').fontSize(12).fontColor(0xCCCCCC).width('90%') 350 Row() { 351 Text('bottom:0, right:0').size({ width: '30%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) 352 .textAlign(TextAlign.Center).position({bottom: 0, right: 0}) 353 Text('top:0, left:0').size({ width: '30%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) 354 .textAlign(TextAlign.Center).position({top: 0, left: 0}) 355 Text('top:10%, left:50%').size({ width: '50%', height: '30' }).backgroundColor(0xbbb2cb).border({ width: 1 }).fontSize(16) 356 .textAlign(TextAlign.Center).position({ top: '10%', left: '50%' }) 357 Text('bottom:0, left:30').size({ width: '50%', height: '30' }).backgroundColor(0xbbb2cb).border({ width: 1 }).fontSize(16) 358 .textAlign(TextAlign.Center).position({ bottom: 0, left: 30 }) 359 }.width('90%').height(100).border({ width: 1, style: BorderStyle.Dashed }) 360 361 362 Text('offset use Edges').fontSize(12).fontColor(0xCCCCCC).width('90%') 363 Row() { 364 Text('1').size({ width: '25%', height: 50 }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) 365 .textAlign(TextAlign.Center) 366 Text('2 top:30, left:0').size({ width: '25%', height: 50 }).backgroundColor(0xbbb2cb).border({ width: 1 }).fontSize(16) 367 .textAlign(TextAlign.Center).offset({top: 30, left: 0}) 368 Text('3').size({ width: '25%', height: 50 }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) 369 .textAlign(TextAlign.Center) 370 Text('4 bottom:10, right:30').size({ width: '25%', height: 50 }).backgroundColor(0xbbb2cb).border({ width: 1 }).fontSize(12) 371 .textAlign(TextAlign.Center).offset({bottom: 10, right: 30}) 372 }.width('90%').height(150).border({ width: 1, style: BorderStyle.Dashed }) 373 }.width('100%').margin({ top: 25 }) 374 } 375} 376``` 377 378 379 380### Example 4 381```ts 382// xxx.ets 383// The mirror mode is supported. 384// The example shows the configuration effects of the **position**, **offset**, and **markAnchor** attributes, from top to bottom. 385// The yellow blocks indicate the original effect, and the pink blocks indicate the mirror effect. 386import { LengthMetrics } from '@kit.ArkUI'; 387@Entry 388@Component 389struct Example4 { 390 private scroller: Scroller = new Scroller() 391 392 build() { 393 Column() { 394 Stack({ alignContent: Alignment.End }) { 395 Scroll(this.scroller) { 396 Flex({ direction: FlexDirection.Column }) { 397 RelativeContainer() { 398 Row() { 399 } 400 .position({ start: LengthMetrics.px(200), top: LengthMetrics.px(100) }) 401 .width("30%") 402 .height("20%") 403 .backgroundColor(Color.Pink) 404 .padding(50) 405 .margin(50) 406 Row() { 407 } 408 .position({ left:'200px', top: '100px' }) 409 .width("30%") 410 .height("20%") 411 .backgroundColor(Color.Yellow) 412 .padding(50) 413 .margin(50) 414 Row() { 415 } 416 .offset({ start: LengthMetrics.vp(100), top: LengthMetrics.vp(200) }) 417 .width("30%") 418 .height("20%") 419 .backgroundColor(Color.Pink) 420 .padding(50) 421 .margin(50) 422 Row() { 423 } 424 .offset({ left: 100, top: 200 }) 425 .width("30%") 426 .height("20%") 427 .backgroundColor(Color.Yellow) 428 .padding(50) 429 .margin(50) 430 Row() { 431 } 432 .markAnchor({ start: LengthMetrics.fp(100), top: LengthMetrics.fp(-350) }) 433 .width("30%") 434 .height("20%") 435 .backgroundColor(Color.Pink) 436 .padding(50) 437 .margin(50) 438 Row() { 439 } 440 .markAnchor({ x: '100fp', y: '-350fp' }) 441 .width("30%") 442 .height("20%") 443 .backgroundColor(Color.Yellow) 444 .padding(50) 445 .margin(50) 446 } 447 .backgroundColor(Color.White) 448 .padding(50) 449 .margin(50) 450 } 451 } 452 .width('100%') 453 .scrollBar(BarState.Off) 454 .scrollable(ScrollDirection.Vertical) 455 456 ScrollBar({ scroller: this.scroller, direction: ScrollBarDirection.Vertical, state: BarState.Auto }) { 457 Text() 458 .width(20) 459 .height(100) 460 .borderRadius(10) 461 .backgroundColor('#C0C0C0') 462 }.width(20).backgroundColor('#ededed') 463 } 464 }.height('90%') 465 } 466} 467``` 468 469
