1# Security Component Universal Attributes 2 3 4Universal attributes of security components are basic attributes applicable to all security components. 5 6 7> **NOTE** 8> 9> This component is supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version. 10 11## iconSize 12 13iconSize(value: Dimension): T 14 15Sets the icon size of the security component. 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 | [Dimension](ts-types.md#dimension10) | Yes|Icon size of the security component.<br>Default value: **16vp**| 26 27**Return value** 28 29| Type| Description| 30| -------- | -------- | 31| T | Attributes of the security component.| 32 33## layoutDirection 34 35layoutDirection(value: SecurityComponentLayoutDirection): T 36 37Sets the direction of the icon and text on the security component. 38 39**Atomic service API**: This API can be used in atomic services since API version 11. 40 41**System capability**: SystemCapability.ArkUI.ArkUI.Full 42 43**Parameters** 44 45| Name| Type| Mandatory| Description | 46|------------|------|-------|---------| 47| value | [SecurityComponentLayoutDirection](#securitycomponentlayoutdirection) |Yes| Direction of the icon and text on the security component.<br>Default value: **SecurityComponentLayoutDirection.HORIZONTAL**| 48 49**Return value** 50 51| Type| Description| 52| -------- | -------- | 53| T | Attributes of the security component.| 54 55## position 56 57position(value: Position): T 58 59Sets the absolute position of the security component, that is, the offset of the component's upper left corner relative to its parent container's. 60 61**Atomic service API**: This API can be used in atomic services since API version 11. 62 63**System capability**: SystemCapability.ArkUI.ArkUI.Full 64 65**Parameters** 66 67| Name| Type| Mandatory| Description | 68|------------|------|-------|---------| 69| value | [Position](ts-types.md#position) |Yes|Offset of the security component's upper left corner relative to its parent container's.<br>Default value:<br>{<br>x: 0,<br>y: 0<br>}| 70 71**Return value** 72 73| Type| Description| 74| -------- | -------- | 75| T | Attributes of the security component.| 76 77## markAnchor 78 79markAnchor(value: Position): T 80 81Sets the anchor of the security component for moving the component with its upper left corner as the reference point. 82 83**Atomic service API**: This API can be used in atomic services since API version 11. 84 85**System capability**: SystemCapability.ArkUI.ArkUI.Full 86 87**Parameters** 88 89| Name| Type | Mandatory| Description | 90|------------|------|-------|---------| 91| value | [Position](ts-types.md#position) |Yes|Anchor of the security component for moving the component with its upper left corner as the reference point. Generally, this attribute is used together with the **position** and **offset** attributes. When used alone, it produces an effect similar to that produced by **offset**.<br>Default value:<br>{<br>x: 0,<br>y: 0<br>}| 92 93**Return value** 94 95| Type| Description| 96| -------- | -------- | 97| T | Attributes of the security component.| 98 99## offset 100 101offset(value: Position | Edges | LocalizedEdges): T 102 103Sets the coordinate offset of the security control relative to its own layout position. 104 105**Atomic service API**: This API can be used in atomic services since API version 11. 106 107**System capability**: SystemCapability.ArkUI.ArkUI.Full 108 109**Parameters** 110 111| Name| Type | Mandatory| Description | 112|------------|------|-------|---------| 113| value | [Position](ts-types.md#position) \| [Edges<sup>12+</sup>](ts-types.md#edges12) \| [LocalizedEdges<sup>12+</sup>](ts-types.md#localizededges12) |Yes|Coordinate offset of the security control relative to its own layout position. This attribute does not affect the layout in the parent container. The offset is used only during drawing.<br>Default value:<br>{<br>x: 0,<br>y: 0<br>}| 114 115**Return value** 116 117| Type| Description| 118| -------- | -------- | 119| T | Attributes of the security component.| 120 121## fontSize 122 123fontSize(value: Dimension): T 124 125Sets the font size of the text on the security component. 126 127**Atomic service API**: This API can be used in atomic services since API version 11. 128 129**System capability**: SystemCapability.ArkUI.ArkUI.Full 130 131**Parameters** 132 133| Name| Type | Mandatory| Description | 134|------------|------|-------|---------| 135| value | [Dimension](ts-types.md#dimension10) |Yes|Font size of the text on the security component.<br>Default value: **16fp**| 136 137**Return value** 138 139| Type| Description| 140| -------- | -------- | 141| T | Attributes of the security component.| 142 143## fontStyle 144 145fontStyle(value: FontStyle): T 146 147Sets the font style of the text on the security component. 148 149**Atomic service API**: This API can be used in atomic services since API version 11. 150 151**System capability**: SystemCapability.ArkUI.ArkUI.Full 152 153**Parameters** 154 155| Name| Type | Mandatory| Description | 156|------------|------|-------|---------| 157| value | [FontStyle](ts-appendix-enums.md#fontstyle) |Yes|Font style of the text on the security component.<br>Default value: **FontStyle.Normal**| 158 159**Return value** 160 161| Type| Description| 162| -------- | -------- | 163| T | Attributes of the security component.| 164 165## fontWeight 166 167fontWeight(value: number | FontWeight | string): T 168 169Sets the font weight of the text on the security component. 170 171**Atomic service API**: This API can be used in atomic services since API version 11. 172 173**System capability**: SystemCapability.ArkUI.ArkUI.Full 174 175**Parameters** 176 177| Name| Type | Mandatory| Description | 178|------------|------|-------|---------| 179| value | number \| [FontWeight](ts-appendix-enums.md#fontweight) \| string |Yes|Font weight of the text on the security component.<br>Default value: **FontWeight.Medium**| 180 181**Return value** 182 183| Type| Description| 184| -------- | -------- | 185| T | Attributes of the security component.| 186 187## fontFamily 188 189fontFamily(value: string | Resource): T 190 191Sets the font family of the text on the security component. 192 193**Atomic service API**: This API can be used in atomic services since API version 11. 194 195**System capability**: SystemCapability.ArkUI.ArkUI.Full 196 197**Parameters** 198 199| Name| Type | Mandatory| Description | 200|------------|------|-------|---------| 201| value | string \| [Resource](ts-types.md#resource) |Yes|Font family of the text on the security component.<br>Default font: **'HarmonyOS Sans'**| 202 203**Return value** 204 205| Type| Description| 206| -------- | -------- | 207| T | Attributes of the security component.| 208 209## fontColor 210 211fontColor(value: ResourceColor): T 212 213Sets the font color of the text on the security component. 214 215**Atomic service API**: This API can be used in atomic services since API version 11. 216 217**System capability**: SystemCapability.ArkUI.ArkUI.Full 218 219**Parameters** 220 221| Name| Type | Mandatory| Description | 222|------------|------|-------|---------| 223| value | [ResourceColor](ts-types.md#resourcecolor) |Yes|Font color of the text in the security component.<br>Default value: **$r('sys.color.font_on_primary')**| 224 225**Return value** 226 227| Type| Description| 228| -------- | -------- | 229| T | Attributes of the security component.| 230 231## iconColor 232 233iconColor(value: ResourceColor): T 234 235Sets the icon color of the security component. 236 237**Atomic service API**: This API can be used in atomic services since API version 11. 238 239**System capability**: SystemCapability.ArkUI.ArkUI.Full 240 241**Parameters** 242 243| Name| Type | Mandatory| Description | 244|------------|------|-------|---------| 245| value | [ResourceColor](ts-types.md#resourcecolor) |Yes|Icon color of the security component.<br>Default value: **$r('sys.color.icon_on_primary')**| 246 247**Return value** 248 249| Type| Description| 250| -------- | -------- | 251| T | Attributes of the security component.| 252 253## backgroundColor 254 255backgroundColor(value: ResourceColor): T 256 257Sets the background color of the security component. 258 259**Atomic service API**: This API can be used in atomic services since API version 11. 260 261**System capability**: SystemCapability.ArkUI.ArkUI.Full 262 263**Parameters** 264 265| Name| Type | Mandatory| Description | 266|------------|------|-------|---------| 267| value | [ResourceColor](ts-types.md#resourcecolor) |Yes|Background color of the security component. If the alpha value of the upper eight bits of the background color of the security component is less than 0x1a (for example, 0x1800ff00), the system will forcibly adjust this alpha value to 0xff.<br>Default value: **$r('sys.color.icon_emphasize')**| 268 269**Return value** 270 271| Type| Description| 272| -------- | -------- | 273| T | Attributes of the security component.| 274 275## borderStyle 276 277borderStyle(value: BorderStyle): T 278 279Sets the border style of the security component. 280 281**Atomic service API**: This API can be used in atomic services since API version 11. 282 283**System capability**: SystemCapability.ArkUI.ArkUI.Full 284 285**Parameters** 286 287| Name| Type | Mandatory| Description | 288|------------|------|-------|---------| 289| value | [BorderStyle](ts-appendix-enums.md#borderstyle) |Yes|Border style of the security component.<br>By default, the border style is not set.| 290 291**Return value** 292 293| Type| Description| 294| -------- | -------- | 295| T | Attributes of the security component.| 296 297## borderWidth 298 299borderWidth(value: Dimension): T 300 301Sets the border width of the security component. 302 303**Atomic service API**: This API can be used in atomic services since API version 11. 304 305**System capability**: SystemCapability.ArkUI.ArkUI.Full 306 307**Parameters** 308 309| Name| Type | Mandatory| Description | 310|------------|------|-------|---------| 311| value | [Dimension](ts-types.md#dimension10) |Yes|Border width of the security component.<br>By default, the border width is not set.| 312 313**Return value** 314 315| Type| Description| 316| -------- | -------- | 317| T | Attributes of the security component.| 318 319## borderColor 320 321borderColor(value: ResourceColor): T 322 323Sets the border color of the security component. 324 325**Atomic service API**: This API can be used in atomic services since API version 11. 326 327**System capability**: SystemCapability.ArkUI.ArkUI.Full 328 329**Parameters** 330 331| Name| Type | Mandatory| Description | 332|------------|------|-------|---------| 333| value | [ResourceColor](ts-types.md#resourcecolor) |Yes|Border color of the security component.<br>By default, the border color is not set.| 334 335**Return value** 336 337| Type| Description| 338| -------- | -------- | 339| T | Attributes of the security component.| 340 341## borderRadius 342 343borderRadius(value: Dimension): T 344 345Sets the radius of the rounded border corners of the security component. 346 347**Atomic service API**: This API can be used in atomic services since API version 11. 348 349**System capability**: SystemCapability.ArkUI.ArkUI.Full 350 351**Parameters** 352 353| Name| Type | Mandatory| Description | 354|------------|------|-------|---------| 355| value | [Dimension](ts-types.md#dimension10) |Yes|Radius of the rounded border corners of the security component.| 356 357**Return value** 358 359| Type| Description| 360| -------- | -------- | 361| T | Attributes of the security component.| 362 363## borderRadius<sup>15+</sup> 364 365borderRadius(radius: Dimension | BorderRadiuses): T 366 367Sets the radius of the border corners for the security component. You can set the radius for each of the four corners individually. 368 369**Atomic service API**: This API can be used in atomic services since API version 15. 370 371**System capability**: SystemCapability.ArkUI.ArkUI.Full 372 373**Parameters** 374 375| Name| Type | Mandatory| Description | 376|------------|------|-------|---------| 377| radius | [Dimension](ts-types.md#dimension10) \| [BorderRadiuses](ts-types.md#borderradiuses9) |Yes|Radius of the rounded border corners of the security component.| 378 379**Return value** 380 381| Type| Description| 382| -------- | -------- | 383| T | Attributes of the security component.| 384 385## padding 386 387padding(value: Padding | Dimension): T 388 389Sets the padding of the security component. 390 391**Atomic service API**: This API can be used in atomic services since API version 11. 392 393**System capability**: SystemCapability.ArkUI.ArkUI.Full 394 395**Parameters** 396 397| Name| Type | Mandatory| Description | 398|------------|------|-------|---------| 399| value | [Padding](ts-types.md#padding) \| [Dimension](ts-types.md#dimension10) |Yes|Padding of the security component.<br>Default value: 8 vp for the top and bottom paddings and 16 vp for the left and right paddings| 400 401**Return value** 402 403| Type| Description| 404| -------- | -------- | 405| T | Attributes of the security component.| 406 407## align<sup>15+</sup> 408 409align(alignType: Alignment): T 410 411Sets the alignment of the icon and text in the security component. 412 413**Atomic service API**: This API can be used in atomic services since API version 15. 414 415**System capability**: SystemCapability.ArkUI.ArkUI.Full 416 417**Parameters** 418 419| Name| Type | Mandatory| Description | 420|------------|------|-------|---------| 421| alignType | [Alignment](ts-appendix-enums.md#alignment) |Yes|Alignment type of the icon and text in the security component. The icon and text are aligned as a whole in the component's background area, and the UX display is affected by the [padding](ts-securitycomponent-attributes.md#padding).<br>Default value: **Alignment.Center**| 422 423**Return value** 424 425| Type| Description| 426| -------- | -------- | 427| T | Attributes of the security component.| 428 429## textIconSpace 430 431textIconSpace(value: Dimension): T 432 433Sets the space between the icon and text on the security component. 434 435**Atomic service API**: This API can be used in atomic services since API version 11. 436 437**System capability**: SystemCapability.ArkUI.ArkUI.Full 438 439**Parameters** 440 441| Name| Type | Mandatory| Description | 442|------------|------|-------|---------| 443| value | [Dimension](ts-types.md#dimension10) |Yes|Space between the icon and text in the security component. Since API version 14, if a negative value is assigned, the default value is used instead.<br>Default value: **4vp**| 444 445**Return value** 446 447| Type| Description| 448| -------- | -------- | 449| T | Attributes of the security component.| 450 451## width<sup>11+</sup> 452 453width(value: Length): T 454 455Sets the width of the security component. By default, the security component automatically adapts its width to the content. 456 457**Atomic service API**: This API can be used in atomic services since API version 12. 458 459**System capability**: SystemCapability.ArkUI.ArkUI.Full 460 461**Parameters** 462 463| Name| Type | Mandatory| Description | 464|------------|------|-------|---------| 465|value | [Length](ts-types.md#length) |Yes|Width of the security component. By default, the security component automatically adapts its width to the content. If the set width is less than the minimum width allowed by the current combination of attributes, the width will be adjusted to the set value, and the button text will automatically wrap to maintain the complete display of the security component.| 466 467**Return value** 468 469| Type| Description| 470| -------- | -------- | 471| T | Attributes of the security component.| 472 473## height<sup>11+</sup> 474 475height(value: Length): T 476 477Sets the height of the security component. By default, the security component automatically adapts its height to the content. 478 479**Atomic service API**: This API can be used in atomic services since API version 12. 480 481**System capability**: SystemCapability.ArkUI.ArkUI.Full 482 483**Parameters** 484 485| Name| Type | Mandatory| Description | 486|------------|------|-------|---------| 487| value | [Length](ts-types.md#length) |Yes|Height of the security component. By default, the security component automatically adapts its height to the content. If the value is less than the minimum height allowed by the current attribute combination, the actual height will be greater than the set value to ensure that content of the security component is fully displayed.| 488 489**Return value** 490 491| Type| Description| 492| -------- | -------- | 493| T | Attributes of the security component.| 494 495## size<sup>11+</sup> 496 497size(value: SizeOptions): T 498 499Sets the size of the security component. By default, the security component automatically adapts its size to the content. 500 501**Atomic service API**: This API can be used in atomic services since API version 12. 502 503**System capability**: SystemCapability.ArkUI.ArkUI.Full 504 505**Parameters** 506 507| Name| Type | Mandatory| Description | 508|------------|------|-------|---------| 509| value | [SizeOptions](ts-types.md#sizeoptions) |Yes|Size of the security component. By default, the security component automatically adapts its size to the content. If the set size is less than the minimum size allowed by the current combination of attributes, the width will be adjusted to the set value while the height will not, and the button text will automatically wrap to ensure the integrity of the display for the security control.| 510 511**Return value** 512 513| Type| Description| 514| -------- | -------- | 515| T | Attributes of the security component.| 516 517## constraintSize<sup>11+</sup> 518 519constraintSize(value: ConstraintSizeOptions): T 520 521Sets the size constraints of the component during component layout. 522 523**Atomic service API**: This API can be used in atomic services since API version 12. 524 525**System capability**: SystemCapability.ArkUI.ArkUI.Full 526 527**Parameters** 528 529| Name| Type | Mandatory| Description | 530|------------|------|-------|---------| 531| value | [ConstraintSizeOptions](ts-types.md#constraintsizeoptions) |Yes|Size constraints of the component during component layout. **constraintSize** takes precedence over **width** and **height**. Learn [how constraintSize affects the width and height](ts-universal-attributes-size.md).<br>As with width and height, if the set size is less than the minimum size allowed by the current combination of attributes, the width will be adjusted to the set value while the height will not, and the button text will automatically wrap to ensure the integrity of the display for the security control.<br>Default value:<br>{<br>minWidth: 0,<br>maxWidth: Infinity,<br>minHeight: 0,<br>maxHeight: Infinity<br>}| 532 533**Return value** 534 535| Type| Description| 536| -------- | -------- | 537| T | Attributes of the security component.| 538 539## alignRules<sup>15+</sup> 540 541alignRules(alignRule: AlignRuleOption): T 542 543Sets the alignment rules in the relative container. This API is valid only when the container is [RelativeContainer](ts-container-relativecontainer.md). 544 545**Atomic service API**: This API can be used in atomic services since API version 15. 546 547**System capability**: SystemCapability.ArkUI.ArkUI.Full 548 549**Parameters** 550 551| Name| Type | Mandatory| Description | 552| ------ | ------------------------------------------- | ---- | ------------------------ | 553| alignRule | [AlignRuleOption](ts-universal-attributes-location.md#alignruleoption) | Yes | Alignment rule in the relative container.| 554 555**Return value** 556 557| Type| Description| 558| -------- | -------- | 559| T | Attributes of the security component.| 560 561## alignRules<sup>15+</sup> 562 563alignRules(alignRule: LocalizedAlignRuleOptions): T 564 565Sets 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** in [alignRules](#alignrules15) for alignment in the horizontal direction. Prioritize this API in aligning child components in the relative container. 566 567**Atomic service API**: This API can be used in atomic services since API version 15. 568 569**System capability**: SystemCapability.ArkUI.ArkUI.Full 570 571**Parameters** 572 573| Name| Type | Mandatory| Description | 574| ------ | ------------------------------------------- | ---- | ------------------------ | 575| alignRule | [LocalizedAlignRuleOptions](ts-universal-attributes-location.md#localizedalignruleoptions12) | Yes | Alignment rule in the relative container.| 576 577**Return value** 578 579| Type| Description| 580| -------- | -------- | 581| T | Attributes of the security component.| 582 583## id<sup>15+</sup> 584 585id(description: string): T 586 587Unique ID you assigned for the component. 588 589**Atomic service API**: This API can be used in atomic services since API version 15. 590 591**System capability**: SystemCapability.ArkUI.ArkUI.Full 592 593**Parameters** 594 595| Name | Type | Mandatory| Description | 596| ------ | -------- | -----|---------------------- | 597| description | string | Yes | Unique ID you assigned for the component.<br>Default value: **''**<br>| 598 599**Return value** 600 601| Type| Description| 602| -------- | -------- | 603| T | Attributes of the security component.| 604 605## chainMode<sup>15+</sup> 606 607chainMode(direction: Axis, style: ChainStyle): T 608 609Sets 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). 610 611**Atomic service API**: This API can be used in atomic services since API version 15. 612 613**System capability**: SystemCapability.ArkUI.ArkUI.Full 614 615**Parameters** 616 617| Name| Type | Mandatory| Description | 618| ------ | ------------------------------------------- | ---- | ------------------------ | 619| direction | [Axis](ts-appendix-enums.md#axis) | Yes | Direction of the chain.| 620| style | [ChainStyle](ts-universal-attributes-location.md#chainstyle12) | Yes | Style of the chain.| 621 622**Return value** 623 624| Type| Description| 625| -------- | -------- | 626| T | Attributes of the security component.| 627 628 629## SecurityComponentLayoutDirection 630 631**Atomic service API**: This API can be used in atomic services since API version 11. 632 633**System capability**: SystemCapability.ArkUI.ArkUI.Full 634 635| Name| Value| Description| 636| -------- | -------- | -------- | 637| HORIZONTAL | 0 | The icon and text on the security component are horizontally arranged.| 638| VERTICAL | 1 | The icon and text on the security component are vertically arranged.| 639 640 641## Example 642 643> **NOTE** 644> You may want to learn the [restrictions on security component styles](../../../security/AccessToken/security-component-overview.md#constraints) to avoid authorization failures caused by incompliant styles. 645 646### Example 1 647 648This example shows how to create a **SaveButton** component and set its security component attributes. 649 650```ts 651@Entry 652@Component 653struct Index { 654 build() { 655 Row() { 656 Column({space:5}) { 657 // Create a SaveButton component and set its security component attributes. 658 SaveButton() 659 .fontSize(35) 660 .fontColor(Color.White) 661 .iconSize(30) 662 .layoutDirection(SecurityComponentLayoutDirection.HORIZONTAL) 663 .borderWidth(1) 664 .borderStyle(BorderStyle.Dashed) 665 .borderColor(Color.Blue) 666 .borderRadius(20) 667 .fontWeight(100) 668 .iconColor(Color.White) 669 .padding({left:50, top:50, bottom:50, right:50}) 670 .textIconSpace(20) 671 .backgroundColor(0x3282f6) 672 SaveButton().size({width:200, height:100}) 673 SaveButton() 674 .size({width:200, height:100}) 675 .align(Alignment.Start) 676 SaveButton({ icon: SaveIconStyle.FULL_FILLED, text: SaveDescription.DOWNLOAD, buttonType: ButtonType.Normal }) 677 .size({width:150, height:80}) 678 .borderRadius({ topLeft: 20, topRight: 25, bottomRight: 30, bottomLeft: 35}) 679 SaveButton().constraintSize({maxWidth:60}) 680 }.width('100%') 681 }.height('100%') 682 } 683} 684``` 685 686 687 688### Example 2 689 690This example demonstrates how to implement a layout using containers and components as anchors. 691 692```ts 693@Entry 694@Component 695struct Index { 696 build() { 697 Row() { 698 RelativeContainer() { 699 SaveButton({icon:SaveIconStyle.FULL_FILLED, text:0, buttonType:ButtonType.Normal}) 700 .width(100).height(100) 701 .backgroundColor("#A3CF62") 702 .alignRules({ 703 top: {anchor: "__container__", align: VerticalAlign.Top}, 704 left: {anchor: "__container__", align: HorizontalAlign.Start} 705 }) 706 .id("row1") 707 708 SaveButton({icon:SaveIconStyle.FULL_FILLED, text:0, buttonType:ButtonType.Normal}) 709 .width(100).height(100) 710 .backgroundColor("#00AE9D") 711 .alignRules({ 712 top: {anchor: "__container__", align: VerticalAlign.Top}, 713 right: {anchor: "__container__", align: HorizontalAlign.End} 714 }) 715 .id("row2") 716 717 SaveButton({icon:SaveIconStyle.FULL_FILLED, text:0, buttonType:ButtonType.Normal}) 718 .height(100) 719 .backgroundColor("#0A59F7") 720 .alignRules({ 721 top: {anchor: "row1", align: VerticalAlign.Bottom}, 722 left: {anchor: "row1", align: HorizontalAlign.End}, 723 right: {anchor: "row2", align: HorizontalAlign.Start} 724 }) 725 .id("row3") 726 727 SaveButton({icon:SaveIconStyle.FULL_FILLED, text:0, buttonType:ButtonType.Normal}) 728 .backgroundColor("#2CA9E0") 729 .alignRules({ 730 top: {anchor: "row3", align: VerticalAlign.Bottom}, 731 bottom: {anchor: "__container__", align: VerticalAlign.Bottom}, 732 left: {anchor: "__container__", align: HorizontalAlign.Start}, 733 right: {anchor: "row1", align: HorizontalAlign.End} 734 }) 735 .id("row4") 736 737 SaveButton({icon:SaveIconStyle.FULL_FILLED, text:0, buttonType:ButtonType.Normal}) 738 .backgroundColor("#30C9F7") 739 .alignRules({ 740 top: {anchor: "row3", align: VerticalAlign.Bottom}, 741 bottom: {anchor: "__container__", align: VerticalAlign.Bottom}, 742 left: {anchor: "row2", align: HorizontalAlign.Start}, 743 right: {anchor: "__container__", align: HorizontalAlign.End} 744 }) 745 .id("row5") 746 } 747 .width(300).height(300) 748 .margin({left: 50}) 749 .border({width:2, color: "#6699FF"}) 750 } 751 .height('100%') 752 } 753} 754``` 755 756 757