1# SaveButton 2 3The **SaveButton** security component represents a save 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 **SaveButton** component 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 **SaveButton** component 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 **SaveButton** component.| 44 45## SaveButtonOptions 46 47Describes the icon, text, and other specific elements for the **SaveButton** component. 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 **SaveButton** component will use the default style: 53> 54> The default value of **SaveIconStyle** is **FULL_FILLED**. 55> 56> The default style of **SaveDescription** is **DOWNLOAD**. 57> 58> The default value of **ButtonType** is **Capsule**. 59> - The **icon**, **text**, and **buttonType** parameters do not support dynamic modification. 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| Name| Type| Mandatory| Description| 66| -------- | -------- | -------- | -------- | 67| icon | [SaveIconStyle](#saveiconstyle) | No| Icon style of the **SaveButton** component.<br>If this parameter is not specified, there is no icon.| 68| text | [SaveDescription](#savedescription) | No| Text on the **SaveButton** component.<br>If this parameter is not specified, there is no text description.| 69| buttonType | [ButtonType](ts-basic-components-button.md#buttontype) | No| Background type of the **SaveButton** component.<br>If this parameter is not specified, the system uses a capsule-type button as the Save button.| 70 71## SaveIconStyle 72 73**Atomic service API**: This API can be used in atomic services since API version 11. 74 75**System capability**: SystemCapability.ArkUI.ArkUI.Full 76 77| Name| Value| Description| 78| -------- | -------- | -------- | 79| FULL_FILLED | 0 | Filled style icon.| 80| LINES | 1 | Line style icon.| 81 82## SaveDescription 83 84**System capability**: SystemCapability.ArkUI.ArkUI.Full 85 86| Name| Value| Description| 87| -------- | -------- | -------- | 88| DOWNLOAD | 0 | The text on the **SaveButton** component is **Download**.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 89| DOWNLOAD_FILE | 1 | The text on the **SaveButton** component is **Download file**.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 90| SAVE | 2 | The text on the **SaveButton** component is **Save**.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 91| SAVE_IMAGE | 3 | The text on the **SaveButton** component is **Save image**.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 92| SAVE_FILE | 4 | The text on the **SaveButton** component is **Save file**.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 93| DOWNLOAD_AND_SHARE | 5 | The text on the **SaveButton** component is **Download & share**.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 94| RECEIVE | 6 | The text on the **SaveButton** component is **Receive**.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 95| CONTINUE_TO_RECEIVE | 7 | The text on the **SaveButton** component is **Continue**.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 96| SAVE_TO_GALLERY<sup>12+</sup> | 8 | The text on the **SaveButton** component is **Save to Gallery**.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 97| EXPORT_TO_GALLERY<sup>12+</sup> | 9 | The text on the **SaveButton** component is **Export**.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 98| QUICK_SAVE_TO_GALLERY<sup>12+</sup> | 10 | The text on the **SaveButton** component is **Save to Gallery**.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 99| RESAVE_TO_GALLERY<sup>12+</sup> | 11 | The text on the **SaveButton** component is **Save**.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 100 101## SaveButtonOnClickResult 102 103**Atomic service API**: This API can be used in atomic services since API version 11. 104 105**System capability**: SystemCapability.ArkUI.ArkUI.Full 106 107| Name| Value| Description| 108| -------- | -------- | -------- | 109| SUCCESS | 0 | The Save button is touched successfully.| 110| TEMPORARY_AUTHORIZATION_FAILED | 1 | Temporary authorization fails after the Save button is touched.| 111 112## Attributes 113 114This component can only inherit the [universal attributes of security components](ts-securitycomponent-attributes.md). 115 116## Events 117 118Only the following events are supported. 119 120### onClick 121 122onClick(event: (event: ClickEvent, result: SaveButtonOnClickResult) => void) 123 124Called when a click event occurs. 125 126**Atomic service API**: This API can be used in atomic services since API version 11. 127 128**System capability**: SystemCapability.ArkUI.ArkUI.Full 129 130**Parameters** 131 132| Name| Type | Mandatory| Description | 133|------------|------|-------|---------| 134| event | [ClickEvent](ts-universal-events-click.md#clickevent) |Yes|See **ClickEvent**.| 135| 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.| 136 137## Example 138 139```ts 140// xxx.ets 141import { photoAccessHelper } from '@kit.MediaLibraryKit'; 142import { fileIo } from '@kit.CoreFileKit'; 143 144@Entry 145@Component 146struct Index { 147 build() { 148 Row() { 149 Column({space:10}) { 150 // Create a default Save button with an icon, text, and background. 151 SaveButton().onClick(async (event:ClickEvent, result:SaveButtonOnClickResult) => { 152 if (result == SaveButtonOnClickResult.SUCCESS) { 153 try { 154 const context = getContext(this); 155 let helper = photoAccessHelper.getPhotoAccessHelper(context); 156 // 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. 157 let uri = await helper.createAsset(photoAccessHelper.PhotoType.IMAGE, 'png'); 158 // Use the URI to open the file. The write process is not time bound. 159 let file = await fileIo.open(uri, fileIo.OpenMode.READ_WRITE | fileIo.OpenMode.CREATE); 160 // Write to the file. 161 await fileIo.write(file.fd, "context"); 162 // Close the file. 163 await fileIo.close(file.fd); 164 } catch (error) { 165 console.error("error is "+ JSON.stringify(error)); 166 } 167 } 168 }) 169 // 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. 170 SaveButton({icon:SaveIconStyle.FULL_FILLED}) 171 // 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. 172 SaveButton({icon:SaveIconStyle.FULL_FILLED, buttonType:ButtonType.Capsule}) 173 .backgroundColor(0x10007dff) 174 // 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. 175 SaveButton({icon:SaveIconStyle.FULL_FILLED, text:SaveDescription.DOWNLOAD, buttonType:ButtonType.Capsule}) 176 // 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. 177 SaveButton({icon:SaveIconStyle.FULL_FILLED, text:SaveDescription.DOWNLOAD, buttonType:ButtonType.Capsule}) 178 .fontSize(16) 179 .width(30) 180 // 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. 181 SaveButton({icon:SaveIconStyle.FULL_FILLED, text:SaveDescription.DOWNLOAD, buttonType:ButtonType.Capsule}) 182 .fontSize(16) 183 .size({width: 30, height: 30}) 184 // 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. 185 SaveButton({icon:SaveIconStyle.FULL_FILLED, text:SaveDescription.DOWNLOAD, buttonType:ButtonType.Capsule}) 186 .fontSize(16) 187 .constraintSize({minWidth: 0, maxWidth: 30, minHeight: 0, maxHeight: 30}) 188 }.width('100%') 189 }.height('100%') 190 } 191} 192``` 193 194 195
