• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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![en-us_image_0000001643038221](figures/en-us_image_0000001643038221.png)
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![SaveBotton_alignRules_1.png](figures/SaveBotton_alignRules_1.png)
757