• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# SaveButton
2
3
4The **\<SaveButton>** security component allows you to obtain temporary storage permission from the user by their touching the button, eliminating the need for a permission request dialog box.
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## Child Components
13
14Not supported
15
16
17## APIs
18
19### SaveButton
20SaveButton()
21
22Creates a Save button with an icon, text, and background.
23
24### SaveButton
25SaveButton(option:{icon?: SaveIconStyle, text?: SaveDescription, buttonType?: ButtonType})
26
27Creates a Save button that contains the specified elements.
28
29**Parameters**
30
31| Name| Type| Mandatory| Description|
32| -------- | -------- | -------- | -------- |
33| icon | [SaveIconStyle](#saveiconstyle) | No| Icon style of the Save button.<br>If this parameter is not specified, no icon is contained. Either **icon** or **text**, or both, must be set.|
34| text | [SaveDescription](#savedescription) | No| Text on the Save button.<br>If this parameter is not specified, no text is contained. Either **icon** or **text**, or both, must be set.|
35| buttonType | [ButtonType](ts-basic-components-button.md#buttontype) | No| Background style of the Save button.<br>If this parameter is not specified, there is no background.|
36
37
38## SaveIconStyle
39
40| Name| Value| Description|
41| -------- | -------- | -------- |
42| FULL_FILLED | 0 | Filled style icon.|
43| LINES | 1 | Line style icon.|
44
45
46## SaveDescription
47
48| Name| Value| Description|
49| -------- | -------- | -------- |
50| DOWNLOAD | 0 | The text on the Save button is **Download**.|
51| DOWNLOAD_FILE | 1 | The text on the Save button is **Download File**.|
52| SAVE | 2 | The text on the Save button is **Save**.|
53| SAVE_IMAGE | 3 | The text on the Save button is **Save Image**.|
54| SAVE_FILE | 4 | The text on the Save button is **Save File**.|
55| DOWNLOAD_AND_SHARE | 5 | The text on the Save button is **Download and Share**.|
56| RECEIVE | 6 | The text on the Save button is **Receive**.|
57| CONTINUE_TO_RECEIVE | 7 | The text on the Save button is **Continue**.|
58
59
60## SaveButtonOnClickResult
61
62| Name| Value| Description|
63| -------- | -------- | -------- |
64| SUCCESS | 0 | The Save button is touched successfully.|
65| TEMPORARY_AUTHORIZATION_FAILED | 1 | Temporary authorization fails after the Save button is touched.|
66
67
68## Attributes
69
70This component can only inherit the [universal attributes of security components](ts-securitycomponent-attributes.md#attributes)
71
72
73## Events
74
75Only the following events are supported.
76
77| Name| Description|
78| -------- | -------- |
79| onClick(event: (event: [ClickEvent](ts-universal-events-click.md#clickevent), result: [SaveButtonOnClickResult](#savebuttononclickresult)) =&gt; void) | Triggered when the component is touched.<br>**result**: authorization result. The authorization is effective for 5 seconds. This means that, a specific media library API can be called, an unlimited number of times, within 5 seconds of the touch. If the API is not called within the 5 seconds, the authorization fails.<br>**event**: For details, see **ClickEvent**.|
80
81
82## Example
83
84```
85// xxx.ets
86import photoAccessHelper from '@ohos.file.photoAccessHelper';
87import fs from '@ohos.file.fs';
88
89@Entry
90@Component
91struct Index {
92  build() {
93    Row() {
94      Column({space:10}) {
95        // Create a default Save button with an icon, text, and background.
96        SaveButton().onClick(async (event:ClickEvent, result:SaveButtonOnClickResult) => {
97          if (result == SaveButtonOnClickResult.SUCCESS) {
98            try {
99              const context = getContext(this);
100              let helper = photoAccessHelper.getPhotoAccessHelper(context);
101              // After onClick is triggered, the createAsset API can be called within 5 seconds to create an image file. After 5 seconds have elapsed, the permission to call createAsset is revoked.
102              let uri = await helper.createAsset(photoAccessHelper.PhotoType.IMAGE, 'png');
103              // Use the URI to open the file. The write process is not time bound.
104              let file = await fs.open(uri, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
105              // Write to the file.
106              await fs.write(file.fd, "context");
107              // Close the file.
108              await fs.close(file.fd);
109            } catch (error) {
110              console.error("error is "+ JSON.stringify(error));
111            }
112          }
113        })
114        // Whether an element is contained depends on whether the parameter corresponding to the element is specified.
115        SaveButton({icon:SaveIconStyle.FULL_FILLED})
116        // Create a Save button with only an icon and background.
117        SaveButton({icon:SaveIconStyle.FULL_FILLED, buttonType:ButtonType.Capsule})
118        // Create a Save button with an icon, text, and background.
119        SaveButton({icon:SaveIconStyle.FULL_FILLED, text:SaveDescription.DOWNLOAD, buttonType:ButtonType.Capsule})
120      }.width('100%')
121    }.height('100%')
122  }
123}
124```
125
126![en-us_image_0000001643320073](figures/en-us_image_0000001643320073.png)
127