1# Security Component Universal Attributes 2 3Universal attributes of security components are basic attributes applicable to all security components. 4 5> **NOTE** 6> 7> This component is supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version. 8 9## iconSize 10 11iconSize(value: Dimension): T 12 13Sets the icon size of the security component. 14 15**Atomic service API**: This API can be used in atomic services since API version 11. 16 17**System capability**: SystemCapability.ArkUI.ArkUI.Full 18 19**Parameters** 20 21| Name| Type| Mandatory| Description | 22|------------|------|-------|---------| 23| value | [Dimension](ts-types.md#dimension10) | Yes|Icon size of the security component.<br>Default value: **16vp**.<br>Percentage strings are not supported.| 24 25**Return value** 26 27| Type| Description| 28| -------- | -------- | 29| T | Attributes of the security component.| 30 31## layoutDirection 32 33layoutDirection(value: SecurityComponentLayoutDirection): T 34 35Sets the layout direction of icons and text in the security component. 36 37**Atomic service API**: This API can be used in atomic services since API version 11. 38 39**System capability**: SystemCapability.ArkUI.ArkUI.Full 40 41**Parameters** 42 43| Name| Type| Mandatory| Description | 44|------------|------|-------|---------| 45| value | [SecurityComponentLayoutDirection](#securitycomponentlayoutdirection) |Yes| Layout direction of icons and text in the security component.<br>Default value: **SecurityComponentLayoutDirection.HORIZONTAL**.| 46 47**Return value** 48 49| Type| Description| 50| -------- | -------- | 51| T | Attributes of the security component.| 52 53## position 54 55position(value: Position): T 56 57Sets the absolute position of the security component, that is, the offset of the component's upper left corner relative to its parent container's. 58 59**Atomic service API**: This API can be used in atomic services since API version 11. 60 61**System capability**: SystemCapability.ArkUI.ArkUI.Full 62 63**Parameters** 64 65| Name| Type| Mandatory| Description | 66|------------|------|-------|---------| 67| 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>}.| 68 69**Return value** 70 71| Type| Description| 72| -------- | -------- | 73| T | Attributes of the security component.| 74 75## markAnchor 76 77markAnchor(value: Position): T 78 79Sets the anchor of the security component for moving the component with its upper left corner as the reference point. 80 81**Atomic service API**: This API can be used in atomic services since API version 11. 82 83**System capability**: SystemCapability.ArkUI.ArkUI.Full 84 85**Parameters** 86 87| Name| Type | Mandatory| Description | 88|------------|------|-------|---------| 89| 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>}.| 90 91**Return value** 92 93| Type| Description| 94| -------- | -------- | 95| T | Attributes of the security component.| 96 97## offset 98 99offset(value: Position | Edges | LocalizedEdges): T 100 101Sets the coordinate offset of the security control relative to its own layout position. 102 103**Atomic service API**: This API can be used in atomic services since API version 11. 104 105**System capability**: SystemCapability.ArkUI.ArkUI.Full 106 107**Parameters** 108 109| Name| Type | Mandatory| Description | 110|------------|------|-------|---------| 111| 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>}.| 112 113**Return value** 114 115| Type| Description| 116| -------- | -------- | 117| T | Attributes of the security component.| 118 119## fontSize 120 121fontSize(value: Dimension): T 122 123Sets the font size of the text in the security component. 124 125**Atomic service API**: This API can be used in atomic services since API version 11. 126 127**System capability**: SystemCapability.ArkUI.ArkUI.Full 128 129**Parameters** 130 131| Name| Type | Mandatory| Description | 132|------------|------|-------|---------| 133| value | [Dimension](ts-types.md#dimension10) |Yes|Font size of the text in the security component.<br>Default value: **16fp**.<br>Percentage strings are not supported.| 134 135**Return value** 136 137| Type| Description| 138| -------- | -------- | 139| T | Attributes of the security component.| 140 141## fontStyle 142 143fontStyle(value: FontStyle): T 144 145Sets the font style of the text in the security component. 146 147**Atomic service API**: This API can be used in atomic services since API version 11. 148 149**System capability**: SystemCapability.ArkUI.ArkUI.Full 150 151**Parameters** 152 153| Name| Type | Mandatory| Description | 154|------------|------|-------|---------| 155| value | [FontStyle](ts-appendix-enums.md#fontstyle) |Yes|Font style of the text in the security component.<br>Default value: **FontStyle.Normal**.| 156 157**Return value** 158 159| Type| Description| 160| -------- | -------- | 161| T | Attributes of the security component.| 162 163## fontWeight 164 165fontWeight(value: number | FontWeight | string): T 166 167Sets the font weight of the text in the security component. 168 169**Atomic service API**: This API can be used in atomic services since API version 11. 170 171**System capability**: SystemCapability.ArkUI.ArkUI.Full 172 173**Parameters** 174 175| Name| Type | Mandatory| Description | 176|------------|------|-------|---------| 177| value | number \| [FontWeight](ts-appendix-enums.md#fontweight) \| string |Yes|Font weight of the text in the security component.<br>Default value: **FontWeight.Medium**.| 178 179**Return value** 180 181| Type| Description| 182| -------- | -------- | 183| T | Attributes of the security component.| 184 185## fontFamily 186 187fontFamily(value: string | Resource): T 188 189Sets the font family of the text in the security component. 190 191**Atomic service API**: This API can be used in atomic services since API version 11. 192 193**System capability**: SystemCapability.ArkUI.ArkUI.Full 194 195**Parameters** 196 197| Name| Type | Mandatory| Description | 198|------------|------|-------|---------| 199| value | string \| [Resource](ts-types.md#resource) |Yes|Font family of the text in the security component.<br>Default font: **'HarmonyOS Sans'**.| 200 201**Return value** 202 203| Type| Description| 204| -------- | -------- | 205| T | Attributes of the security component.| 206 207## fontColor 208 209fontColor(value: ResourceColor): T 210 211Sets the font color of the text in the security component. 212 213**Atomic service API**: This API can be used in atomic services since API version 11. 214 215**System capability**: SystemCapability.ArkUI.ArkUI.Full 216 217**Parameters** 218 219| Name| Type | Mandatory| Description | 220|------------|------|-------|---------| 221| 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')**.| 222 223**Return value** 224 225| Type| Description| 226| -------- | -------- | 227| T | Attributes of the security component.| 228 229## iconColor 230 231iconColor(value: ResourceColor): T 232 233Sets the icon color of the security component. 234 235**Atomic service API**: This API can be used in atomic services since API version 11. 236 237**System capability**: SystemCapability.ArkUI.ArkUI.Full 238 239**Parameters** 240 241| Name| Type | Mandatory| Description | 242|------------|------|-------|---------| 243| value | [ResourceColor](ts-types.md#resourcecolor) |Yes|Icon color of the security component.<br>Default value: **$r('sys.color.icon_on_primary')**.| 244 245**Return value** 246 247| Type| Description| 248| -------- | -------- | 249| T | Attributes of the security component.| 250 251## backgroundColor 252 253backgroundColor(value: ResourceColor): T 254 255Sets the background color of the security component. 256 257**Atomic service API**: This API can be used in atomic services since API version 11. 258 259**System capability**: SystemCapability.ArkUI.ArkUI.Full 260 261**Parameters** 262 263| Name| Type | Mandatory| Description | 264|------------|------|-------|---------| 265| 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')**.| 266 267**Return value** 268 269| Type| Description| 270| -------- | -------- | 271| T | Attributes of the security component.| 272 273## borderStyle 274 275borderStyle(value: BorderStyle): T 276 277Sets the border style of the security component. 278 279**Atomic service API**: This API can be used in atomic services since API version 11. 280 281**System capability**: SystemCapability.ArkUI.ArkUI.Full 282 283**Parameters** 284 285| Name| Type | Mandatory| Description | 286|------------|------|-------|---------| 287| value | [BorderStyle](ts-appendix-enums.md#borderstyle) |Yes|Border style of the security component.<br>By default, the border style is not set.| 288 289**Return value** 290 291| Type| Description| 292| -------- | -------- | 293| T | Attributes of the security component.| 294 295## borderWidth 296 297borderWidth(value: Dimension): T 298 299Sets the border width of the security component. 300 301**Atomic service API**: This API can be used in atomic services since API version 11. 302 303**System capability**: SystemCapability.ArkUI.ArkUI.Full 304 305**Parameters** 306 307| Name| Type | Mandatory| Description | 308|------------|------|-------|---------| 309| value | [Dimension](ts-types.md#dimension10) |Yes|Border width of the security component.<br>By default, the border width is not set.| 310 311**Return value** 312 313| Type| Description| 314| -------- | -------- | 315| T | Attributes of the security component.| 316 317## borderColor 318 319borderColor(value: ResourceColor): T 320 321Sets the border color of the security component. 322 323**Atomic service API**: This API can be used in atomic services since API version 11. 324 325**System capability**: SystemCapability.ArkUI.ArkUI.Full 326 327**Parameters** 328 329| Name| Type | Mandatory| Description | 330|------------|------|-------|---------| 331| value | [ResourceColor](ts-types.md#resourcecolor) |Yes|Border color of the security component.<br>By default, the border color is not set.| 332 333**Return value** 334 335| Type| Description| 336| -------- | -------- | 337| T | Attributes of the security component.| 338 339## borderRadius 340 341borderRadius(value: Dimension): T 342 343Sets the radius of the rounded border corners of the security component. 344 345**Atomic service API**: This API can be used in atomic services since API version 11. 346 347**System capability**: SystemCapability.ArkUI.ArkUI.Full 348 349**Parameters** 350 351| Name| Type | Mandatory| Description | 352|------------|------|-------|---------| 353| value | [Dimension](ts-types.md#dimension10) |Yes|Radius of the rounded border corners of the security component.| 354 355**Return value** 356 357| Type| Description| 358| -------- | -------- | 359| T | Attributes of the security component.| 360 361## borderRadius<sup>15+</sup> 362 363borderRadius(radius: Dimension | BorderRadiuses): T 364 365Sets the radius of the border corners for the security component. You can set the radius for each of the four corners individually. 366 367**Atomic service API**: This API can be used in atomic services since API version 15. 368 369**System capability**: SystemCapability.ArkUI.ArkUI.Full 370 371**Parameters** 372 373| Name| Type | Mandatory| Description | 374|------------|------|-------|---------| 375| radius | [Dimension](ts-types.md#dimension10) \| [BorderRadiuses](ts-types.md#borderradiuses9) |Yes|Radius of the rounded border corners of the security component.| 376 377**Return value** 378 379| Type| Description| 380| -------- | -------- | 381| T | Attributes of the security component.| 382 383## padding 384 385padding(value: Padding | Dimension): T 386 387Sets the padding of the security component. 388 389**Atomic service API**: This API can be used in atomic services since API version 11. 390 391**System capability**: SystemCapability.ArkUI.ArkUI.Full 392 393**Parameters** 394 395| Name| Type | Mandatory| Description | 396|------------|------|-------|---------| 397| 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.| 398 399**Return value** 400 401| Type| Description| 402| -------- | -------- | 403| T | Attributes of the security component.| 404 405## align<sup>15+</sup> 406 407align(alignType: Alignment): T 408 409Sets the alignment of the icon and text in the security component. 410 411**Atomic service API**: This API can be used in atomic services since API version 15. 412 413**System capability**: SystemCapability.ArkUI.ArkUI.Full 414 415**Parameters** 416 417| Name| Type | Mandatory| Description | 418|------------|------|-------|---------| 419| 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**.| 420 421**Return value** 422 423| Type| Description| 424| -------- | -------- | 425| T | Attributes of the security component.| 426 427## textIconSpace 428 429textIconSpace(value: Dimension): T 430 431Sets the space between the icon and text in the security component. 432 433**Atomic service API**: This API can be used in atomic services since API version 11. 434 435**System capability**: SystemCapability.ArkUI.ArkUI.Full 436 437**Parameters** 438 439| Name| Type | Mandatory| Description | 440|------------|------|-------|---------| 441| 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**.| 442 443**Return value** 444 445| Type| Description| 446| -------- | -------- | 447| T | Attributes of the security component.| 448 449## width<sup>11+</sup> 450 451width(value: Length): T 452 453Sets the width of the security component. By default, the security component automatically adapts its width to the content. 454 455**Atomic service API**: This API can be used in atomic services since API version 12. 456 457**System capability**: SystemCapability.ArkUI.ArkUI.Full 458 459**Parameters** 460 461| Name| Type | Mandatory| Description | 462|------------|------|-------|---------| 463|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.| 464 465**Return value** 466 467| Type| Description| 468| -------- | -------- | 469| T | Attributes of the security component.| 470 471## height<sup>11+</sup> 472 473height(value: Length): T 474 475Sets the height of the security component. By default, the security component automatically adapts its height to the content. 476 477**Atomic service API**: This API can be used in atomic services since API version 12. 478 479**System capability**: SystemCapability.ArkUI.ArkUI.Full 480 481**Parameters** 482 483| Name| Type | Mandatory| Description | 484|------------|------|-------|---------| 485| 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.| 486 487**Return value** 488 489| Type| Description| 490| -------- | -------- | 491| T | Attributes of the security component.| 492 493## size<sup>11+</sup> 494 495size(value: SizeOptions): T 496 497Sets the size of the security component. By default, the security component automatically adapts its size to the content. 498 499**Atomic service API**: This API can be used in atomic services since API version 12. 500 501**System capability**: SystemCapability.ArkUI.ArkUI.Full 502 503**Parameters** 504 505| Name| Type | Mandatory| Description | 506|------------|------|-------|---------| 507| 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.| 508 509**Return value** 510 511| Type| Description| 512| -------- | -------- | 513| T | Attributes of the security component.| 514 515## constraintSize<sup>11+</sup> 516 517constraintSize(value: ConstraintSizeOptions): T 518 519Sets the size constraints of the component during component layout. 520 521**Atomic service API**: This API can be used in atomic services since API version 12. 522 523**System capability**: SystemCapability.ArkUI.ArkUI.Full 524 525**Parameters** 526 527| Name| Type | Mandatory| Description | 528|------------|------|-------|---------| 529| 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>}.| 530 531**Return value** 532 533| Type| Description| 534| -------- | -------- | 535| T | Attributes of the security component.| 536 537## alignRules<sup>15+</sup> 538 539alignRules(alignRule: AlignRuleOption): T 540 541Sets the alignment rules in the relative container. This API is valid only when the container is [RelativeContainer](ts-container-relativecontainer.md). 542 543**Atomic service API**: This API can be used in atomic services since API version 15. 544 545**System capability**: SystemCapability.ArkUI.ArkUI.Full 546 547**Parameters** 548 549| Name| Type | Mandatory| Description | 550| ------ | ------------------------------------------- | ---- | ------------------------ | 551| alignRule | [AlignRuleOption](ts-universal-attributes-location.md#alignruleoption) | Yes | Alignment rule in the relative container.| 552 553**Return value** 554 555| Type| Description| 556| -------- | -------- | 557| T | Attributes of the security component.| 558 559## alignRules<sup>15+</sup> 560 561alignRules(alignRule: LocalizedAlignRuleOptions): T 562 563Sets 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. 564 565**Atomic service API**: This API can be used in atomic services since API version 15. 566 567**System capability**: SystemCapability.ArkUI.ArkUI.Full 568 569**Parameters** 570 571| Name| Type | Mandatory| Description | 572| ------ | ------------------------------------------- | ---- | ------------------------ | 573| alignRule | [LocalizedAlignRuleOptions](ts-universal-attributes-location.md#localizedalignruleoptions12) | Yes | Alignment rule in the relative container.| 574 575**Return value** 576 577| Type| Description| 578| -------- | -------- | 579| T | Attributes of the security component.| 580 581## id<sup>15+</sup> 582 583id(description: string): T 584 585Unique ID you assigned for the component. 586 587**Atomic service API**: This API can be used in atomic services since API version 15. 588 589**System capability**: SystemCapability.ArkUI.ArkUI.Full 590 591**Parameters** 592 593| Name | Type | Mandatory| Description | 594| ------ | -------- | -----|---------------------- | 595| description | string | Yes | Unique ID you assigned for the component.<br>Default value: **''**.<br>| 596 597**Return value** 598 599| Type| Description| 600| -------- | -------- | 601| T | Attributes of the security component.| 602 603## chainMode<sup>15+</sup> 604 605chainMode(direction: Axis, style: ChainStyle): T 606 607Sets 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). 608 609**Atomic service API**: This API can be used in atomic services since API version 15. 610 611**System capability**: SystemCapability.ArkUI.ArkUI.Full 612 613**Parameters** 614 615| Name| Type | Mandatory| Description | 616| ------ | ------------------------------------------- | ---- | ------------------------ | 617| direction | [Axis](ts-appendix-enums.md#axis) | Yes | Direction of the chain.| 618| style | [ChainStyle](ts-universal-attributes-location.md#chainstyle12) | Yes | Style of the chain.| 619 620**Return value** 621 622| Type| Description| 623| -------- | -------- | 624| T | Attributes of the security component.| 625 626## minFontScale<sup>18+</sup> 627 628minFontScale(scale: number | Resource): T 629 630Sets the minimum font scale factor for text. 631 632**Atomic service API**: This API can be used in atomic services since API version 18. 633 634**System capability**: SystemCapability.ArkUI.ArkUI.Full 635 636**Parameters** 637 638| Name| Type | Mandatory| Description | 639| ------ | --------------------------------------------- | ---- | --------------------------------------------- | 640| scale | number \| [Resource](ts-types.md#resource) | Yes | Minimum font scale factor for text.<br>Value range: [0, 1].<br>**NOTE**<br>If the value is less than 0, it will be handled as 0, meaning no limit on scaling down. If the value is greater than 1, it will be handled as 1, meaning the scaling down will not take effect. Values outside the range are considered invalid and will not take effect by default.| 641 642**Return value** 643 644| Type| Description| 645| -------- | -------- | 646| T | Attributes of the security component.| 647 648## maxFontScale<sup>18+</sup> 649 650maxFontScale(scale: number | Resource): T 651 652Sets the maximum font scale factor for text. 653 654**Atomic service API**: This API can be used in atomic services since API version 18. 655 656**System capability**: SystemCapability.ArkUI.ArkUI.Full 657 658**Parameters** 659 660| Name| Type | Mandatory| Description | 661| ------ | --------------------------------------------- | ---- | --------------------------------------------- | 662| scale | number \| [Resource](ts-types.md#resource) | Yes | Maximum font scale factor for text.<br>Value range: [1, +∞).<br>**NOTE**<br>A value less than 1 is handled as **1**. Abnormal values are ineffective by default.| 663 664**Return value** 665 666| Type| Description| 667| -------- | -------- | 668| T | Attributes of the security component.| 669 670## minFontSize<sup>18+</sup> 671 672minFontSize(minSize: number | string | Resource): T 673 674Sets the minimum font size. 675- When used in conjunction with [maxFontSize](#maxfontsize18) and [maxLines](#maxlines18), or in combination with layout size constraints, this attribute enables font size adaptation. Using this attribute alone will not take effect. 676- If the value of **minFontSize** is less than or equal to 0, font size adaptation does not take effect. 677- When font size adaptation is enabled, the **fontSize** settings do not take effect. 678 679**Atomic service API**: This API can be used in atomic services since API version 18. 680 681**System capability**: SystemCapability.ArkUI.ArkUI.Full 682 683**Parameters** 684 685| Name| Type | Mandatory| Description | 686| ------ | ------------------------------------------------------------ | ---- | ------------------ | 687| value | number \| string \| [Resource](ts-types.md#resource) | Yes | Minimum font size.| 688 689**Return value** 690 691| Type| Description| 692| -------- | -------- | 693| T | Attributes of the security component.| 694 695## maxFontSize<sup>18+</sup> 696 697maxFontSize(maxSize: number | string | Resource): T 698 699Sets the maximum font size. 700- When used in conjunction with [minFontSize](#minfontsize18) and [maxLines](#maxlines18), or in combination with layout size constraints, this attribute enables font size adaptation. Using this attribute alone will not take effect. 701- When font size adaptation is enabled, the **fontSize** settings do not take effect. 702 703**Atomic service API**: This API can be used in atomic services since API version 18. 704 705**System capability**: SystemCapability.ArkUI.ArkUI.Full 706 707**Parameters** 708 709| Name| Type | Mandatory| Description | 710| ------ | ------------------------------------------------------------ | ---- | ------------------ | 711| value | number \| string \| [Resource](ts-types.md#resource) | Yes | Maximum font size.| 712 713**Return value** 714 715| Type| Description| 716| -------- | -------- | 717| T | Attributes of the security component.| 718 719## maxLines<sup>18+</sup> 720 721maxLines(line: number): T 722 723Maximum number of lines in the text. By default, text is wrapped. After this attribute is specified, the maximum number of text lines does not exceed the specified value. 724 725**Atomic service API**: This API can be used in atomic services since API version 18. 726 727**System capability**: SystemCapability.ArkUI.ArkUI.Full 728 729**Parameters** 730 731| Name| Type | Mandatory| Description | 732| ------ | ------ | ---- | ---------------- | 733| value | number | Yes | Maximum number of lines in the text.<br>Value range: [1, +∞).<br>**NOTE**<br>If the value is less than 1, it is handled as the default value 100000.| 734 735**Return value** 736 737| Type| Description| 738| -------- | -------- | 739| T | Attributes of the security component.| 740 741## heightAdaptivePolicy<sup>18+</sup> 742 743heightAdaptivePolicy(policy: TextHeightAdaptivePolicy): T 744 745Sets the policy for text height adaptation. 746 747The text size is adjusted based on the specified height adaptation policy. 748 749**TextHeightAdaptivePolicy.MAX_LINES_FIRST**: prioritizes the [maxLines](#maxlines18) attribute for adjusting the text height. If the layout size using the **maxLines** attribute exceeds the layout constraints, the security component attempts to reduce the font size within the range of [minFontSize](#minfontsize18) and [maxFontSize](#maxfontsize18) to display more text. If the text still cannot be fully displayed, the security component adaptively adjusts its height to fully display the text. 750 751**TextHeightAdaptivePolicy.MIN_FONT_SIZE_FIRST**: prioritizes the [minFontSize](#minfontsize18) attribute for adjusting the text height. If the text can be laid out in a single line using **minFontSize**, the security component attempts to increase the font size within the range of **minFontSize** and [maxFontSize](#maxfontsize18) to use the largest possible font size. If the text cannot be laid out in a single line using **minFontSize**, the security component attempts to use the [maxLines](#maxlines18) attribute for layout. If the text still cannot be fully displayed, the security component adaptively adjusts its height to fully display the text. 752 753**TextHeightAdaptivePolicy.LAYOUT_CONSTRAINT_FIRST**: prioritizes layout constraints for adjusting the text height. If the layout size exceeds the constraints, the security component attempts to reduce the font size within the range of [minFontSize](#minfontsize18) and [maxFontSize](#maxfontsize18). If the layout size still exceeds the constraints after the font size is reduced to **minFontSize**, the security component truncates the excess lines. If the [maxLines](#maxlines18) attribute is set, the number of lines does not exceed the **maxLines** value (horizontal truncation may occur). If **maxLines** is not set, there is no limit on the number of lines. 754 755When the layout can fully display the text without adjustment, no adaptive adjustments are made to the text. 756 757If the text in the security component is not fully displayed, authorization will not be granted upon clicking. 758 759**Atomic service API**: This API can be used in atomic services since API version 18. 760 761**System capability**: SystemCapability.ArkUI.ArkUI.Full 762 763**Parameters** 764 765| Name| Type | Mandatory| Description | 766| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 767| value | [TextHeightAdaptivePolicy](ts-appendix-enums.md#textheightadaptivepolicy10) | Yes | Policy for text height adaptation.<br>Default value: **TextHeightAdaptivePolicy.MAX_LINES_FIRST**.| 768 769**Return value** 770 771| Type| Description| 772| -------- | -------- | 773| T | Attributes of the security component.| 774 775## enabled<sup>18+</sup> 776 777enabled(respond: boolean): T 778 779Sets whether the security component is interactive. 780 781**Atomic service API**: This API can be used in atomic services since API version 18. 782 783**System capability**: SystemCapability.ArkUI.ArkUI.Full 784 785**Parameters** 786 787| Name| Type | Mandatory| Description | 788| ------ | ------- | ---- | ------------------------------------------------------------ | 789| value | boolean | Yes | Whether the security component is interactive.<br>**true**: The component is interactive and responds to operations such as clicks.<br>**false**: The component is non-interactive and does not respond to operations such as clicks.<br>Default value: **true**.| 790 791**Return value** 792 793| Type| Description| 794| -------- | -------- | 795| T | Attributes of the security component.| 796 797 798 799## SecurityComponentLayoutDirection 800 801**Atomic service API**: This API can be used in atomic services since API version 11. 802 803**System capability**: SystemCapability.ArkUI.ArkUI.Full 804 805| Name| Value| Description| 806| -------- | -------- | -------- | 807| HORIZONTAL | 0 | The icons and text in the security component are horizontally arranged.| 808| VERTICAL | 1 | The icons and text on the security component are vertically arranged.| 809 810## ButtonType 811 812Enumerates the button types. 813 814The button type affects how the settings for the [borderRadius](ts-securitycomponent-attributes.md#borderradius) attribute are applied. The specific impact is as follows: 815 816- For a button of the **Capsule** type, the **borderRadius** settings do not take effect, and the button's corner radius is always half of the button's height or width, whichever is smaller. 817- For a button of the **Circle** type: 818 - If both its width and height are set, the **borderRadius** settings do not take effect, and the button radius is half of the width or height, whichever is smaller. 819 - If either its width or height is set, the **borderRadius** settings do not take effect, and the button radius is half of the set width or height. 820 - If neither its width nor height is set, or if **borderRadius** is set to a negative value, the button radius is determined by the layout constraints. 821- If **borderRadius** is not specified, the corner radius of a rounded rectangle button remains at the default value, 20 vp, regardless of the button's height. 822 823**Atomic service API**: This API can be used in atomic services since API version 11. 824 825**System capability**: SystemCapability.ArkUI.ArkUI.Full 826 827| Name | Description | 828| ------- | ------------------ | 829| Capsule | Capsule-type button, with a default corner radius equal to half of the button's height.| 830| Circle | Circular button. | 831| Normal | Normal button, with no rounded corners by default. | 832| ROUNDED_RECTANGLE<sup>16+</sup> | Rounded rectangle button, with a default corner radius of 20 vp.| 833 834## Example 835 836> **NOTE** 837> 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. 838 839### Example 1 840 841This example shows how to create a **SaveButton** component and set its security component attributes. 842 843```ts 844@Entry 845@Component 846struct Index { 847 build() { 848 Row() { 849 Column({ space: 5 }) { 850 // Create a SaveButton component and set its security component attributes. 851 SaveButton() 852 .fontSize(35) 853 .fontColor(Color.White) 854 .iconSize(30) 855 .layoutDirection(SecurityComponentLayoutDirection.HORIZONTAL) 856 .borderWidth(1) 857 .borderStyle(BorderStyle.Dashed) 858 .borderColor(Color.Blue) 859 .borderRadius(20) 860 .fontWeight(100) 861 .iconColor(Color.White) 862 .padding({ 863 left: 50, 864 top: 50, 865 bottom: 50, 866 right: 50 867 }) 868 .textIconSpace(20) 869 .backgroundColor(0x3282f6) 870 SaveButton().size({ width: 200, height: 100 }) 871 SaveButton() 872 .size({ width: 200, height: 100 }) 873 .align(Alignment.Start) 874 SaveButton({ icon: SaveIconStyle.FULL_FILLED, text: SaveDescription.DOWNLOAD, buttonType: ButtonType.Normal }) 875 .size({ width: 150, height: 80 }) 876 .borderRadius({ 877 topLeft: 20, 878 topRight: 25, 879 bottomRight: 30, 880 bottomLeft: 35 881 }) 882 SaveButton().constraintSize({ maxWidth: 60 }) 883 }.width('100%') 884 }.height('100%') 885 } 886} 887``` 888 889 890 891### Example 2 892 893This example demonstrates how to implement a layout using containers and components as anchors. 894 895```ts 896@Entry 897@Component 898struct Index { 899 build() { 900 Row() { 901 RelativeContainer() { 902 SaveButton({ icon: SaveIconStyle.FULL_FILLED, text: SaveDescription.DOWNLOAD, buttonType: ButtonType.Normal }) 903 .width(100) 904 .height(100) 905 .backgroundColor("#A3CF62") 906 .alignRules({ 907 top: { anchor: "__container__", align: VerticalAlign.Top }, 908 left: { anchor: "__container__", align: HorizontalAlign.Start } 909 }) 910 .id("row1") 911 912 SaveButton({ icon: SaveIconStyle.FULL_FILLED, text: SaveDescription.DOWNLOAD, buttonType: ButtonType.Normal }) 913 .width(100) 914 .height(100) 915 .backgroundColor("#00AE9D") 916 .alignRules({ 917 top: { anchor: "__container__", align: VerticalAlign.Top }, 918 right: { anchor: "__container__", align: HorizontalAlign.End } 919 }) 920 .id("row2") 921 922 SaveButton({ icon: SaveIconStyle.FULL_FILLED, text: SaveDescription.DOWNLOAD, buttonType: ButtonType.Normal }) 923 .height(100) 924 .backgroundColor("#0A59F7") 925 .alignRules({ 926 top: { anchor: "row1", align: VerticalAlign.Bottom }, 927 left: { anchor: "row1", align: HorizontalAlign.End }, 928 right: { anchor: "row2", align: HorizontalAlign.Start } 929 }) 930 .id("row3") 931 932 SaveButton({ icon: SaveIconStyle.FULL_FILLED, text: SaveDescription.DOWNLOAD, buttonType: ButtonType.Normal }) 933 .backgroundColor("#2CA9E0") 934 .alignRules({ 935 top: { anchor: "row3", align: VerticalAlign.Bottom }, 936 bottom: { anchor: "__container__", align: VerticalAlign.Bottom }, 937 left: { anchor: "__container__", align: HorizontalAlign.Start }, 938 right: { anchor: "row1", align: HorizontalAlign.End } 939 }) 940 .id("row4") 941 942 SaveButton({ icon: SaveIconStyle.FULL_FILLED, text: SaveDescription.DOWNLOAD, buttonType: ButtonType.Normal }) 943 .backgroundColor("#30C9F7") 944 .alignRules({ 945 top: { anchor: "row3", align: VerticalAlign.Bottom }, 946 bottom: { anchor: "__container__", align: VerticalAlign.Bottom }, 947 left: { anchor: "row2", align: HorizontalAlign.Start }, 948 right: { anchor: "__container__", align: HorizontalAlign.End } 949 }) 950 .id("row5") 951 } 952 .width(300).height(300) 953 .margin({ left: 50 }) 954 .border({ width: 2, color: "#6699FF" }) 955 } 956 .height('100%') 957 } 958} 959``` 960 961 962
