1# SaveButton
2
3The **SaveButton** security component represents a Paste button that allows you to obtain temporary storage permissions from users with a simple button touch, eliminating the need for a permission request dialog box.
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## Child Components
10
11Not supported
12
13## APIs
14
15### SaveButton
16
17SaveButton()
18
19Creates a Save button with an icon, text, and background.
20
21You 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.
22
23**Atomic service API**: This API can be used in atomic services since API version 11.
24
25**System capability**: SystemCapability.ArkUI.ArkUI.Full
26
27### SaveButton
28
29SaveButton(options:SaveButtonOptions)
30
31Creates a Save button that contains the specified elements.
32
33You 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.
34
35**Atomic service API**: This API can be used in atomic services since API version 11.
36
37**System capability**: SystemCapability.ArkUI.ArkUI.Full
38
39**Parameters**
40
41| Name| Type| Mandatory| Description|
42| -------- | -------- | -------- | -------- |
43| options | [SaveButtonOptions](#savebuttonoptions) | Yes| Options for creating the Save button.|
44
45## SaveButtonOptions
46
47Describes the icon, text, and other specific elements for the Save button.
48
49> **NOTE**
50>
51> At least one of **icon** or **text** must be provided.<br>
52> If neither **icon** nor **text** is provided, the **options** parameter in [SaveButton](#savebutton-1) will not take effect, and the created Save button will be in the default style.
53
54**Atomic service API**: This API can be used in atomic services since API version 11.
55
56**System capability**: SystemCapability.ArkUI.ArkUI.Full
57
58| Name| Type| Mandatory| Description|
59| -------- | -------- | -------- | -------- |
60| icon | [SaveIconStyle](#saveiconstyle) | No| Icon style of the Save button.<br>If this parameter is not specified, there is no icon.|
61| text | [SaveDescription](#savedescription) | No| Text on the Save button.<br>If this parameter is not specified, there is no text description.|
62| buttonType | [ButtonType](ts-basic-components-button.md#buttontype) | No| Background type of the Save button.<br>If this parameter is not specified, the system uses a capsule-type button as the Save button.|
63
64## SaveIconStyle
65
66**Atomic service API**: This API can be used in atomic services since API version 11.
67
68**System capability**: SystemCapability.ArkUI.ArkUI.Full
69
70| Name| Value| Description|
71| -------- | -------- | -------- |
72| FULL_FILLED | 0 | Filled style icon.|
73| LINES | 1 | Line style icon.|
74
75## SaveDescription
76
77**System capability**: SystemCapability.ArkUI.ArkUI.Full
78
79| Name| Value| Description|
80| -------- | -------- | -------- |
81| DOWNLOAD | 0 | The text on the Save button is **Download**.<br>**Atomic service API**: This API can be used in atomic services since API version 11.|
82| DOWNLOAD_FILE | 1 | The text on the Save button is **Download File**.<br>**Atomic service API**: This API can be used in atomic services since API version 11.|
83| SAVE | 2 | The text on the Save button is **Save**.<br>**Atomic service API**: This API can be used in atomic services since API version 11.|
84| SAVE_IMAGE | 3 | The text on the Save button is **Save Image**.<br>**Atomic service API**: This API can be used in atomic services since API version 11.|
85| SAVE_FILE | 4 | The text on the Save button is **Save File**.<br>**Atomic service API**: This API can be used in atomic services since API version 11.|
86| DOWNLOAD_AND_SHARE | 5 | The text on the Save button is **Download and Share**.<br>**Atomic service API**: This API can be used in atomic services since API version 11.|
87| RECEIVE | 6 | The text on the Save button is **Receive**.<br>**Atomic service API**: This API can be used in atomic services since API version 11.|
88| CONTINUE_TO_RECEIVE | 7 | The text on the Save button is **Continue**.<br>**Atomic service API**: This API can be used in atomic services since API version 11.|
89| SAVE_TO_GALLERY<sup>12+</sup> | 8 | The text on the Save button is **Save to Gallery**.<br>**Atomic service API**: This API can be used in atomic services since API version 12.|
90| EXPORT_TO_GALLERY<sup>12+</sup> | 9 | The text on the Save button is **Export**.<br>**Atomic service API**: This API can be used in atomic services since API version 12.|
91| QUICK_SAVE_TO_GALLERY<sup>12+</sup> | 10 | The text on the Save button is **Quick Save**.<br>**Atomic service API**: This API can be used in atomic services since API version 12.|
92| RESAVE_TO_GALLERY<sup>12+</sup> | 11 | The text on the Save button is **Resave**.<br>**Atomic service API**: This API can be used in atomic services since API version 12.|
93
94## SaveButtonOnClickResult
95
96**Atomic service API**: This API can be used in atomic services since API version 11.
97
98**System capability**: SystemCapability.ArkUI.ArkUI.Full
99
100| Name| Value| Description|
101| -------- | -------- | -------- |
102| SUCCESS | 0 | The Save button is touched successfully.|
103| TEMPORARY_AUTHORIZATION_FAILED | 1 | Temporary authorization fails after the Save button is touched.|
104
105## Attributes
106
107This component can only inherit the [universal attributes of security components](ts-securitycomponent-attributes.md).
108
109## Events
110
111Only the following events are supported.
112
113### onClick
114
115onClick(event: (event: ClickEvent, result: SaveButtonOnClickResult) =&gt; void)
116
117Called when a click event occurs.
118
119**Atomic service API**: This API can be used in atomic services since API version 11.
120
121**System capability**: SystemCapability.ArkUI.ArkUI.Full
122
123**Parameters**
124
125| Name| Type                  | Mandatory| Description                  |
126|------------|------|-------|---------|
127| event  | [ClickEvent](ts-universal-events-click.md#clickevent) |Yes|See **ClickEvent**.|
128| result | [SaveButtonOnClickResult](#savebuttononclickresult)| Yes| Authorization result. The authorization is effective for 10 seconds. This means that, a specific media library API can be called, an unlimited number of times, within 10 seconds of the touch. If the API is not called within the 10 seconds, the authorization fails.|
129
130## Example
131
132```ts
133// xxx.ets
134import { photoAccessHelper } from '@kit.MediaLibraryKit';
135import { fileIo } from '@kit.CoreFileKit';
136
137@Entry
138@Component
139struct Index {
140  build() {
141    Row() {
142      Column({space:10}) {
143        // Create a default Save button with an icon, text, and background.
144        SaveButton().onClick(async (event:ClickEvent, result:SaveButtonOnClickResult) => {
145          if (result == SaveButtonOnClickResult.SUCCESS) {
146            try {
147              const context = getContext(this);
148              let helper = photoAccessHelper.getPhotoAccessHelper(context);
149              // After onClick is triggered, the createAsset API can be called within 10 seconds to create an image file. After 10 seconds have elapsed, the permission to call createAsset is revoked.
150              let uri = await helper.createAsset(photoAccessHelper.PhotoType.IMAGE, 'png');
151              // Use the URI to open the file. The write process is not time bound.
152              let file = await fileIo.open(uri, fileIo.OpenMode.READ_WRITE | fileIo.OpenMode.CREATE);
153              // Write to the file.
154              await fileIo.write(file.fd, "context");
155              // Close the file.
156              await fileIo.close(file.fd);
157            } catch (error) {
158              console.error("error is "+ JSON.stringify(error));
159            }
160          }
161        })
162        // Whether the button has an icon, text, and background depends on whether the corresponding parameter is passed in. If buttonType is not passed in, the button uses the ButtonType.Capsule settings.
163        SaveButton({icon:SaveIconStyle.FULL_FILLED})
164        // This button only has the icon and background. If the alpha value of the most significant eight bits of the background color is less than 0x1A, the system forcibly adjusts the alpha value to 0xFF.
165        SaveButton({icon:SaveIconStyle.FULL_FILLED, buttonType:ButtonType.Capsule})
166          .backgroundColor(0x10007dff)
167        // The button has an icon, text, and background. If the alpha value of the most significant eight bits of the background color is less than 0x1A, the system forcibly adjusts the alpha value to 0xFF.
168        SaveButton({icon:SaveIconStyle.FULL_FILLED, text:SaveDescription.DOWNLOAD, buttonType:ButtonType.Capsule})
169        // Create a button with an icon, text, and background. If the set width is less than the minimum allowed, the button's text will wrap to guarantee full text display.
170        SaveButton({icon:SaveIconStyle.FULL_FILLED, text:SaveDescription.DOWNLOAD, buttonType:ButtonType.Capsule})
171          .fontSize(16)
172          .width(30)
173        // Create a button with an icon, text, and background. If the set width is less than the minimum allowed, the button's text will wrap to guarantee full text display.
174        SaveButton({icon:SaveIconStyle.FULL_FILLED, text:SaveDescription.DOWNLOAD, buttonType:ButtonType.Capsule})
175          .fontSize(16)
176          .size({width: 30, height: 30})
177        // Create a button with an icon, text, and background. If the set width is less than the minimum allowed, the button's text will wrap to guarantee full text display.
178        SaveButton({icon:SaveIconStyle.FULL_FILLED, text:SaveDescription.DOWNLOAD, buttonType:ButtonType.Capsule})
179          .fontSize(16)
180          .constraintSize({minWidth: 0, maxWidth: 30, minHeight: 0, maxHeight: 30})
181      }.width('100%')
182    }.height('100%')
183  }
184}
185```
186
187![en-us_image_0000001643320073](figures/en-us_image_0000001643320073.png)
188