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:SaveButtonOptions) 26 27Creates a Save button that contains the specified elements. 28 29**Parameters** 30 31| Name| Type| Mandatory| Description| 32| -------- | -------- | -------- | -------- | 33| option | SaveButtonOptions | No| Creates a Save button that contains the specified elements.| 34 35## SaveButtonOptions 36 37| Name| Type| Mandatory| Description| 38| -------- | -------- | -------- | -------- | 39| 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.| 40| 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.| 41| 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.| 42 43 44## SaveIconStyle 45 46| Name| Value| Description| 47| -------- | -------- | -------- | 48| FULL_FILLED | 0 | Filled style icon.| 49| LINES | 1 | Line style icon.| 50 51 52## SaveDescription 53 54| Name| Value| Description| 55| -------- | -------- | -------- | 56| DOWNLOAD | 0 | The text on the Save button is **Download**.| 57| DOWNLOAD_FILE | 1 | The text on the Save button is **Download File**.| 58| SAVE | 2 | The text on the Save button is **Save**.| 59| SAVE_IMAGE | 3 | The text on the Save button is **Save Image**.| 60| SAVE_FILE | 4 | The text on the Save button is **Save File**.| 61| DOWNLOAD_AND_SHARE | 5 | The text on the Save button is **Download and Share**.| 62| RECEIVE | 6 | The text on the Save button is **Receive**.| 63| CONTINUE_TO_RECEIVE | 7 | The text on the Save button is **Continue**.| 64 65 66## SaveButtonOnClickResult 67 68| Name| Value| Description| 69| -------- | -------- | -------- | 70| SUCCESS | 0 | The Save button is touched successfully.| 71| TEMPORARY_AUTHORIZATION_FAILED | 1 | Temporary authorization fails after the Save button is touched.| 72 73 74## Attributes 75 76This component can only inherit the [universal attributes of security components](ts-securitycomponent-attributes.md#attributes) 77 78 79## Events 80 81Only the following events are supported. 82 83| Name| Description| 84| -------- | -------- | 85| onClick(event: (event: [ClickEvent](ts-universal-events-click.md#clickevent), result: [SaveButtonOnClickResult](#savebuttononclickresult)) => void) | Triggered when the component is touched.<br>**result**: 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.<br>**event**: For details, see **ClickEvent**.| 86 87 88## Example 89 90``` 91// xxx.ets 92import photoAccessHelper from '@ohos.file.photoAccessHelper'; 93import fs from '@ohos.file.fs'; 94 95@Entry 96@Component 97struct Index { 98 build() { 99 Row() { 100 Column({space:10}) { 101 // Create a default Save button with an icon, text, and background. 102 SaveButton().onClick(async (event:ClickEvent, result:SaveButtonOnClickResult) => { 103 if (result == SaveButtonOnClickResult.SUCCESS) { 104 try { 105 const context = getContext(this); 106 let helper = photoAccessHelper.getPhotoAccessHelper(context); 107 // 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. 108 let uri = await helper.createAsset(photoAccessHelper.PhotoType.IMAGE, 'png'); 109 // Use the URI to open the file. The write process is not time bound. 110 let file = await fs.open(uri, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE); 111 // Write to the file. 112 await fs.write(file.fd, "context"); 113 // Close the file. 114 await fs.close(file.fd); 115 } catch (error) { 116 console.error("error is "+ JSON.stringify(error)); 117 } 118 } 119 }) 120 // Whether an element is contained depends on whether the parameter corresponding to the element is specified. 121 SaveButton({icon:SaveIconStyle.FULL_FILLED}) 122 // Create a Save button with only an icon and background. 123 SaveButton({icon:SaveIconStyle.FULL_FILLED, buttonType:ButtonType.Capsule}) 124 // Create a Save button with an icon, text, and background. 125 SaveButton({icon:SaveIconStyle.FULL_FILLED, text:SaveDescription.DOWNLOAD, buttonType:ButtonType.Capsule}) 126 }.width('100%') 127 }.height('100%') 128 } 129} 130``` 131 132 133
