1# SaveButton 2 3The **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. 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| Creates a Save button that contains the specified elements.| 44 45## SaveButtonOptions 46 47**Atomic service API**: This API can be used in atomic services since API version 11. 48 49**System capability**: SystemCapability.ArkUI.ArkUI.Full 50 51| Name| Type| Mandatory| Description| 52| -------- | -------- | -------- | -------- | 53| 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.| 54| 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.| 55| 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.| 56 57## SaveIconStyle 58 59**Atomic service API**: This API can be used in atomic services since API version 11. 60 61**System capability**: SystemCapability.ArkUI.ArkUI.Full 62 63| Name| Value| Description| 64| -------- | -------- | -------- | 65| FULL_FILLED | 0 | Filled style icon.| 66| LINES | 1 | Line style icon.| 67 68## SaveDescription 69 70**System capability**: SystemCapability.ArkUI.ArkUI.Full 71 72| Name| Value| Description| 73| -------- | -------- | -------- | 74| 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.| 75| 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.| 76| 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.| 77| 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.| 78| 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.| 79| 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.| 80| 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.| 81| 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.| 82| 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.| 83| 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.| 84| 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.| 85| 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.| 86 87## SaveButtonOnClickResult 88 89**Atomic service API**: This API can be used in atomic services since API version 11. 90 91**System capability**: SystemCapability.ArkUI.ArkUI.Full 92 93| Name| Value| Description| 94| -------- | -------- | -------- | 95| SUCCESS | 0 | The Save button is touched successfully.| 96| TEMPORARY_AUTHORIZATION_FAILED | 1 | Temporary authorization fails after the Save button is touched.| 97 98## Attributes 99 100This component can only inherit the [universal attributes of security components](ts-securitycomponent-attributes.md). 101 102## Events 103 104Only the following events are supported. 105 106### onClick 107 108onClick(event: (event: ClickEvent, result: SaveButtonOnClickResult) => void) 109 110Called when a click event occurs. 111 112**Atomic service API**: This API can be used in atomic services since API version 11. 113 114**System capability**: SystemCapability.ArkUI.ArkUI.Full 115 116**Parameters** 117 118| Name| Type | Mandatory| Description | 119|------------|------|-------|---------| 120| event | [ClickEvent](ts-universal-events-click.md#clickevent) |Yes|See **ClickEvent**.| 121| 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.| 122 123## Example 124 125```ts 126// xxx.ets 127import { photoAccessHelper } from '@kit.MediaLibraryKit'; 128import { fileIo } from '@kit.CoreFileKit'; 129 130@Entry 131@Component 132struct Index { 133 build() { 134 Row() { 135 Column({space:10}) { 136 // Create a default Save button with an icon, text, and background. 137 SaveButton().onClick(async (event:ClickEvent, result:SaveButtonOnClickResult) => { 138 if (result == SaveButtonOnClickResult.SUCCESS) { 139 try { 140 const context = getContext(this); 141 let helper = photoAccessHelper.getPhotoAccessHelper(context); 142 // 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. 143 let uri = await helper.createAsset(photoAccessHelper.PhotoType.IMAGE, 'png'); 144 // Use the URI to open the file. The write process is not time bound. 145 let file = await fileIo.open(uri, fileIo.OpenMode.READ_WRITE | fileIo.OpenMode.CREATE); 146 // Write to the file. 147 await fileIo.write(file.fd, "context"); 148 // Close the file. 149 await fileIo.close(file.fd); 150 } catch (error) { 151 console.error("error is "+ JSON.stringify(error)); 152 } 153 } 154 }) 155 // 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. 156 SaveButton({icon:SaveIconStyle.FULL_FILLED}) 157 // 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. 158 SaveButton({icon:SaveIconStyle.FULL_FILLED, buttonType:ButtonType.Capsule}) 159 .backgroundColor(0x10007dff) 160 // 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. 161 SaveButton({icon:SaveIconStyle.FULL_FILLED, text:SaveDescription.DOWNLOAD, buttonType:ButtonType.Capsule}) 162 // 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. 163 SaveButton({icon:SaveIconStyle.FULL_FILLED, text:SaveDescription.DOWNLOAD, buttonType:ButtonType.Capsule}) 164 .fontSize(16) 165 .width(30) 166 // 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. 167 SaveButton({icon:SaveIconStyle.FULL_FILLED, text:SaveDescription.DOWNLOAD, buttonType:ButtonType.Capsule}) 168 .fontSize(16) 169 .size({width: 30, height: 30}) 170 // 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. 171 SaveButton({icon:SaveIconStyle.FULL_FILLED, text:SaveDescription.DOWNLOAD, buttonType:ButtonType.Capsule}) 172 .fontSize(16) 173 .constraintSize({minWidth: 0, maxWidth: 30, minHeight: 0, maxHeight: 30}) 174 }.width('100%') 175 }.height('100%') 176 } 177} 178``` 179 180 181
