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 12## Attributes 13 14| Name| Type| Mandatory| Description| 15| -------- | -------- | -------- | -------- | 16| iconSize | [Dimension](ts-types.md#dimension10) | No| Icon size of the security component.<br>Default value: **16vp**| 17| layoutDirection | [SecurityComponentLayoutDirection](#securitycomponentlayoutdirection) | No| Direction of the icon and text on the security component.<br>Default value: **SecurityComponentLayoutDirection.HORIZONTAL**| 18| position | [Position](ts-types.md#position8) | No| Absolute position of the security component, that is, the offset of the component's upper left corner relative to its parent container's.<br>Default value:<br>{<br>x: 0,<br>y: 0<br>} | 19| markAnchor | [Position](ts-types.md#position8) | No| 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>} | 20| offset | [Position](ts-types.md#position8) | No| 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>} | 21| fontSize | [Dimension](ts-types.md#dimension10) | No| Font size of the text on the security component.<br>Default value: **16fp**| 22| fontStyle | [FontStyle](ts-appendix-enums.md#fontstyle) | No| Font style of the text on the security component.<br>Default value: **FontStyle.Normal**| 23| fontWeight | number \| [FontWeight](ts-appendix-enums.md#fontweight) \| string | No| Font weight of the text on the security component.<br>Default value: **FontWeight.Medium**| 24| fontFamily | string \| [Resource](ts-types.md#resource) | No| Font family of the text on the security component.<br>Default font: **'HarmonyOS Sans'**| 25| fontColor | [ResourceColor](ts-types.md#resourcecolor) | No| Font color of the text on the security component.<br>Default value: **'\#ffffffff'**| 26| iconColor | [ResourceColor](ts-types.md#resourcecolor) | No| Color of the icon on the security component.<br>Default value: **'\#ffffffff'**| 27| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | No| Background color of the security component.<br>Default value: **\#007dff**| 28| borderStyle | [BorderStyle](ts-appendix-enums.md#borderstyle) | No| Border style of the security component.<br>By default, the border style is not set.| 29| borderWidth | [Dimension](ts-types.md#dimension10) | No| Border width of the security component.<br>By default, the border width is not set.| 30| borderColor | [ResourceColor](ts-types.md#resourcecolor) | No| Border color of the security component.<br>By default, the border color is not set.| 31| borderRadius | [Dimension](ts-types.md#dimension10) | No| Radius of the rounded border corners of the security component.| 32| padding | [Padding](ts-types.md#padding) \| [Dimension](ts-types.md#dimension10) | No| Padding of the security component.<br>Default value: 12 vp for the top and bottom paddings and 24 vp for the left and right paddings| 33| textIconSpace | [Dimension](ts-types.md#dimension10) | No| Space between the icon and text on the security component.<br>Default value: **4vp**| 34 35 36## SecurityComponentLayoutDirection 37 38| Name| Value| Description| 39| -------- | -------- | -------- | 40| HORIZONTAL | 0 | The icon and text on security component are horizontally arranged.| 41| VERTICAL | 1 | The icon and text on security component are vertically arranged.| 42 43 44## Example 45 46```ts 47// xxx.ets 48@Entry 49@Component 50struct Index { 51 build() { 52 Row() { 53 Column() { 54 // Generate a save button and set its security component attributes. 55 SaveButton() 56 .fontSize(35) 57 .fontColor(Color.White) 58 .iconSize(30) 59 .layoutDirection(SecurityComponentLayoutDirection.HORIZONTAL) 60 .borderWidth(1) 61 .borderStyle(BorderStyle.Dashed) 62 .borderColor(Color.Blue) 63 .borderRadius(20) 64 .fontWeight(100) 65 .iconColor(Color.White) 66 .padding({left:50, top:50, bottom:50, right:50}) 67 .textIconSpace(20) 68 .backgroundColor(0x3282f6) 69 }.width('100%') 70 }.height('100%') 71 } 72} 73``` 74 75 76
