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## iconSize
13
14iconSize(value: Dimension): T
15
16Sets the icon size of the security component.
17
18**Atomic service API**: This API can be used in atomic services since API version 11.
19
20**System capability**: SystemCapability.ArkUI.ArkUI.Full
21
22**Parameters**
23
24| Name| Type| Mandatory| Description                  |
25|------------|------|-------|---------|
26| value | [Dimension](ts-types.md#dimension10) | Yes|Icon size of the security component.<br>Default value: **16vp**|
27
28**Return value**
29
30| Type| Description|
31| -------- | -------- |
32| T | Attributes of the security component.|
33
34## layoutDirection
35
36layoutDirection(value: SecurityComponentLayoutDirection): T
37
38Sets the direction of the icon and text on the security component.
39
40**Atomic service API**: This API can be used in atomic services since API version 11.
41
42**System capability**: SystemCapability.ArkUI.ArkUI.Full
43
44**Parameters**
45
46| Name| Type| Mandatory| Description                  |
47|------------|------|-------|---------|
48| value | [SecurityComponentLayoutDirection](#securitycomponentlayoutdirection) |Yes| Direction of the icon and text on the security component.<br>Default value: **SecurityComponentLayoutDirection.HORIZONTAL**|
49
50**Return value**
51
52| Type| Description|
53| -------- | -------- |
54| T | Attributes of the security component.|
55
56## position
57
58position(value: Position): T
59
60Sets the absolute position of the security component, that is, the offset of the component's upper left corner relative to its parent container's.
61
62**Atomic service API**: This API can be used in atomic services since API version 11.
63
64**System capability**: SystemCapability.ArkUI.ArkUI.Full
65
66**Parameters**
67
68| Name| Type| Mandatory| Description                  |
69|------------|------|-------|---------|
70| 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>}|
71
72**Return value**
73
74| Type| Description|
75| -------- | -------- |
76| T | Attributes of the security component.|
77
78## markAnchor
79
80markAnchor(value: Position): T
81
82Sets the anchor of the security component for moving the component with its upper left corner as the reference point.
83
84**Atomic service API**: This API can be used in atomic services since API version 11.
85
86**System capability**: SystemCapability.ArkUI.ArkUI.Full
87
88**Parameters**
89
90| Name| Type                  | Mandatory| Description                  |
91|------------|------|-------|---------|
92| 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>}|
93
94**Return value**
95
96| Type| Description|
97| -------- | -------- |
98| T | Attributes of the security component.|
99
100## offset
101
102offset(value: Position | Edges | LocalizedEdges): T
103
104Sets the coordinate offset of the security control relative to its own layout position.
105
106**Atomic service API**: This API can be used in atomic services since API version 11.
107
108**System capability**: SystemCapability.ArkUI.ArkUI.Full
109
110**Parameters**
111
112| Name| Type                  | Mandatory| Description                  |
113|------------|------|-------|---------|
114| 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>}|
115
116**Return value**
117
118| Type| Description|
119| -------- | -------- |
120| T | Attributes of the security component.|
121
122## fontSize
123
124fontSize(value: Dimension): T
125
126Sets the font size of the text on the security component.
127
128**Atomic service API**: This API can be used in atomic services since API version 11.
129
130**System capability**: SystemCapability.ArkUI.ArkUI.Full
131
132**Parameters**
133
134| Name| Type                  | Mandatory| Description                  |
135|------------|------|-------|---------|
136| value | [Dimension](ts-types.md#dimension10) |Yes|Font size of the text on the security component.<br>Default value: **16fp**|
137
138**Return value**
139
140| Type| Description|
141| -------- | -------- |
142| T | Attributes of the security component.|
143
144## fontStyle
145
146fontStyle(value: FontStyle): T
147
148Font style of the text on the security component.
149
150**Atomic service API**: This API can be used in atomic services since API version 11.
151
152**System capability**: SystemCapability.ArkUI.ArkUI.Full
153
154**Parameters**
155
156| Name| Type                  | Mandatory| Description                  |
157|------------|------|-------|---------|
158| value | [FontStyle](ts-appendix-enums.md#fontstyle) |Yes|Font style of the text on the security component.<br>Default value: **FontStyle.Normal**|
159
160**Return value**
161
162| Type| Description|
163| -------- | -------- |
164| T | Attributes of the security component.|
165
166## fontWeight
167
168fontWeight(value: number | FontWeight | string): T
169
170Sets the font weight of the text on the security component.
171
172**Atomic service API**: This API can be used in atomic services since API version 11.
173
174**System capability**: SystemCapability.ArkUI.ArkUI.Full
175
176**Parameters**
177
178| Name| Type                  | Mandatory| Description                  |
179|------------|------|-------|---------|
180| value | number \| [FontWeight](ts-appendix-enums.md#fontweight) \| string |Yes|Font weight of the text on the security component.<br>Default value: **FontWeight.Medium**|
181
182**Return value**
183
184| Type| Description|
185| -------- | -------- |
186| T | Attributes of the security component.|
187
188## fontFamily
189
190fontFamily(value: string | Resource): T
191
192Sets the font family of the text on the security component.
193
194**Atomic service API**: This API can be used in atomic services since API version 11.
195
196**System capability**: SystemCapability.ArkUI.ArkUI.Full
197
198**Parameters**
199
200| Name| Type                  | Mandatory| Description                  |
201|------------|------|-------|---------|
202| value | string \| [Resource](ts-types.md#resource) |Yes|Font family of the text on the security component.<br>Default font: **'HarmonyOS Sans'**|
203
204**Return value**
205
206| Type| Description|
207| -------- | -------- |
208| T | Attributes of the security component.|
209
210## fontColor
211
212fontColor(value: ResourceColor): T
213
214Sets the font color of the text on the security component.
215
216**Atomic service API**: This API can be used in atomic services since API version 11.
217
218**System capability**: SystemCapability.ArkUI.ArkUI.Full
219
220**Parameters**
221
222| Name| Type                  | Mandatory| Description                  |
223|------------|------|-------|---------|
224| value | [ResourceColor](ts-types.md#resourcecolor) |Yes|Font color of the text on the security component.<br>Default value: **'\#ffffffff'**|
225
226**Return value**
227
228| Type| Description|
229| -------- | -------- |
230| T | Attributes of the security component.|
231
232## iconColor
233
234iconColor(value: ResourceColor): T
235
236Sets the color of the icon on the security component.
237
238**Atomic service API**: This API can be used in atomic services since API version 11.
239
240**System capability**: SystemCapability.ArkUI.ArkUI.Full
241
242**Parameters**
243
244| Name| Type                  | Mandatory| Description                  |
245|------------|------|-------|---------|
246| value | [ResourceColor](ts-types.md#resourcecolor) |Yes|Color of the icon on the security component.<br>Default value: **'\#ffffffff'**|
247
248**Return value**
249
250| Type| Description|
251| -------- | -------- |
252| T | Attributes of the security component.|
253
254## backgroundColor
255
256backgroundColor(value: ResourceColor): T
257
258Sets the background color of the security component.
259
260**Atomic service API**: This API can be used in atomic services since API version 11.
261
262**System capability**: SystemCapability.ArkUI.ArkUI.Full
263
264**Parameters**
265
266| Name| Type                  | Mandatory| Description                  |
267|------------|------|-------|---------|
268| value | [ResourceColor](ts-types.md#resourcecolor) |Yes|Background color of the security component.<br>Default value: **\#007dff**|
269
270**Return value**
271
272| Type| Description|
273| -------- | -------- |
274| T | Attributes of the security component.|
275
276## borderStyle
277
278borderStyle(value: BorderStyle): T
279
280Sets the border style of the security component.
281
282**Atomic service API**: This API can be used in atomic services since API version 11.
283
284**System capability**: SystemCapability.ArkUI.ArkUI.Full
285
286**Parameters**
287
288| Name| Type                  | Mandatory| Description                  |
289|------------|------|-------|---------|
290| value | [BorderStyle](ts-appendix-enums.md#borderstyle) |Yes|Border style of the security component.<br>By default, the border style is not set.|
291
292**Return value**
293
294| Type| Description|
295| -------- | -------- |
296| T | Attributes of the security component.|
297
298## borderWidth
299
300borderWidth(value: Dimension): T
301
302Sets the border width of the security component.
303
304**Atomic service API**: This API can be used in atomic services since API version 11.
305
306**System capability**: SystemCapability.ArkUI.ArkUI.Full
307
308**Parameters**
309
310| Name| Type                  | Mandatory| Description                  |
311|------------|------|-------|---------|
312| value | [Dimension](ts-types.md#dimension10) |Yes|Border width of the security component.<br>By default, the border width is not set.|
313
314**Return value**
315
316| Type| Description|
317| -------- | -------- |
318| T | Attributes of the security component.|
319
320## borderColor
321
322borderColor(value: ResourceColor): T
323
324Sets the border color of the security component.
325
326**Atomic service API**: This API can be used in atomic services since API version 11.
327
328**System capability**: SystemCapability.ArkUI.ArkUI.Full
329
330**Parameters**
331
332| Name| Type                  | Mandatory| Description                  |
333|------------|------|-------|---------|
334| value | [ResourceColor](ts-types.md#resourcecolor) |Yes|Border color of the security component.<br>By default, the border color is not set.|
335
336**Return value**
337
338| Type| Description|
339| -------- | -------- |
340| T | Attributes of the security component.|
341
342## borderRadius
343
344borderRadius(value: Dimension): T
345
346Sets the radius of the rounded border corners of the security component.
347
348**Atomic service API**: This API can be used in atomic services since API version 11.
349
350**System capability**: SystemCapability.ArkUI.ArkUI.Full
351
352**Parameters**
353
354| Name| Type                  | Mandatory| Description                  |
355|------------|------|-------|---------|
356| value |  [Dimension](ts-types.md#dimension10) |Yes|Radius of the rounded border corners of the security component.|
357
358**Return value**
359
360| Type| Description|
361| -------- | -------- |
362| T | Attributes of the security component.|
363
364## padding
365
366padding(value: Padding | Dimension): T
367
368Sets the padding of the security component.
369
370**Atomic service API**: This API can be used in atomic services since API version 11.
371
372**System capability**: SystemCapability.ArkUI.ArkUI.Full
373
374**Parameters**
375
376| Name| Type                  | Mandatory| Description                  |
377|------------|------|-------|---------|
378| 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|
379
380**Return value**
381
382| Type| Description|
383| -------- | -------- |
384| T | Attributes of the security component.|
385
386## textIconSpace
387
388textIconSpace(value: Dimension): T
389
390Sets the space between the icon and text on the security component.
391
392**Atomic service API**: This API can be used in atomic services since API version 11.
393
394**System capability**: SystemCapability.ArkUI.ArkUI.Full
395
396**Parameters**
397
398| Name| Type                  | Mandatory| Description                  |
399|------------|------|-------|---------|
400| value | [Dimension](ts-types.md#dimension10) |Yes|Space between the icon and text on the security component.<br>Default value: **4vp**|
401
402**Return value**
403
404| Type| Description|
405| -------- | -------- |
406| T | Attributes of the security component.|
407
408## width<sup>11+</sup>
409
410width(value: Length): T
411
412Sets the width of the security component. By default, the security component automatically adapts its width to the content.
413
414**Atomic service API**: This API can be used in atomic services since API version 12.
415
416**System capability**: SystemCapability.ArkUI.ArkUI.Full
417
418**Parameters**
419
420| Name| Type                  | Mandatory| Description                  |
421|------------|------|-------|---------|
422|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.|
423
424**Return value**
425
426| Type| Description|
427| -------- | -------- |
428| T | Attributes of the security component.|
429
430## height<sup>11+</sup>
431
432height(value: Length): T
433
434Sets the height of the security component. By default, the security component automatically adapts its height to the content.
435
436**Atomic service API**: This API can be used in atomic services since API version 12.
437
438**System capability**: SystemCapability.ArkUI.ArkUI.Full
439
440**Parameters**
441
442| Name| Type                  | Mandatory| Description                  |
443|------------|------|-------|---------|
444| 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.|
445
446**Return value**
447
448| Type| Description|
449| -------- | -------- |
450| T | Attributes of the security component.|
451
452## size<sup>11+</sup>
453
454size(value: SizeOptions): T
455
456Sets the size of the security component. By default, the security component automatically adapts its size to the content.
457
458**Atomic service API**: This API can be used in atomic services since API version 12.
459
460**System capability**: SystemCapability.ArkUI.ArkUI.Full
461
462**Parameters**
463
464| Name| Type                  | Mandatory| Description                  |
465|------------|------|-------|---------|
466| 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.|
467
468**Return value**
469
470| Type| Description|
471| -------- | -------- |
472| T | Attributes of the security component.|
473
474## constraintSize<sup>11+</sup>
475
476constraintSize(value: ConstraintSizeOptions): T
477
478Sets the size constraints of the component during component layout.
479
480**Atomic service API**: This API can be used in atomic services since API version 12.
481
482**System capability**: SystemCapability.ArkUI.ArkUI.Full
483
484**Parameters**
485
486| Name| Type                  | Mandatory| Description                  |
487|------------|------|-------|---------|
488| value | [ConstraintSizeOptions](ts-types.md#constraintsizeoptions) |Yes|Size constraints of the component during component layout. **constraintSize** takes precedence over **width** and **height**. Learn [how the value of this attribute 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>}|
489
490**Return value**
491
492| Type| Description|
493| -------- | -------- |
494| T | Attributes of the security component.|
495
496
497## SecurityComponentLayoutDirection
498
499**Atomic service API**: This API can be used in atomic services since API version 11.
500
501**System capability**: SystemCapability.ArkUI.ArkUI.Full
502
503| Name| Value| Description|
504| -------- | -------- | -------- |
505| HORIZONTAL | 0 | The icon and text on the security component are horizontally arranged.|
506| VERTICAL | 1 | The icon and text on the security component are vertically arranged.|
507
508
509## Example
510
511> **NOTE**
512> 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.
513
514```ts
515// xxx.ets
516@Entry
517@Component
518struct Index {
519  build() {
520    Row() {
521      Column({space:5}) {
522        // Generate a save button and set its security component attributes.
523        SaveButton()
524          .fontSize(35)
525          .fontColor(Color.White)
526          .iconSize(30)
527          .layoutDirection(SecurityComponentLayoutDirection.HORIZONTAL)
528          .borderWidth(1)
529          .borderStyle(BorderStyle.Dashed)
530          .borderColor(Color.Blue)
531          .borderRadius(20)
532          .fontWeight(100)
533          .iconColor(Color.White)
534          .padding({left:50, top:50, bottom:50, right:50})
535          .textIconSpace(20)
536          .backgroundColor(0x3282f6)
537        SaveButton().size({width:200, height:100})
538        SaveButton().constraintSize({maxWidth:60})
539      }.width('100%')
540    }.height('100%')
541  }
542}
543```
544
545![en-us_image_0000001643038221](figures/en-us_image_0000001643038221.png)
546