1# Action Sheet (ActionSheet) 2 3An action sheet is a dialog box that displays actions a user can take. 4 5> **NOTE** 6> 7> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. 8> 9> The functionality of this module depends on UI context. This means that the APIs of this module cannot be used where the UI context is unclear. For details, see [UIContext](../js-apis-arkui-UIContext.md#uicontext). 10> 11> Since API version 10, you can use the [showActionSheet](../js-apis-arkui-UIContext.md#showactionsheet) API in [UIContext](../js-apis-arkui-UIContext.md#uicontext), which ensures that the action sheet is shown in the intended UI instance. 12 13## ActionSheet 14 15### show 16 17static show(value: ActionSheetOptions) 18 19Shows an action sheet in the given settings. 20 21**Atomic service API**: This API can be used in atomic services since API version 11. 22 23**System capability**: SystemCapability.ArkUI.ArkUI.Full 24 25**Parameters** 26 27| Name| Type | Mandatory| Description | 28| ------ | ------------------------------------------------- | ---- | ------------------------ | 29| value | [ActionSheetOptions](#actionsheetoptions) | Yes | Parameters of the action sheet.| 30 31## ActionSheetOptions 32 33**System capability**: SystemCapability.ArkUI.ArkUI.Full 34 35| Name | Type | Mandatory | Description | 36| ---------- | -------------------------- | ------- | ----------------------------- | 37| title | string \| [Resource](ts-types.md#resource) | Yes | Title of the dialog box.<br>If the text is too long to display, it is truncated with an ellipsis (...).<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 38| subtitle<sup>10+</sup> | [ResourceStr](ts-types.md#resourcestr) | No| Subtitle of the dialog box.<br>If the text is too long to display, it is truncated with an ellipsis (...).<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 39| message | string \| [Resource](ts-types.md#resource) | Yes | Content of the dialog box.<br>If the text is too long to display, a scrollbar is displayed.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 40| autoCancel | boolean | No | Whether to close the dialog box when the mask is clicked.<br>Default value: **true**<br>The value **true** means to close the dialog box when the mask is clicked, and **false** means the opposite.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 41| confirm | [ActionSheetButtonOptions](#actionsheetbuttonoptions18) | No | Information about the confirm button. When the dialog box has focus and focus has not been shifted using the **Tab** key, the button responds to the **Enter** key by default, and multiple dialog boxes can gain focus consecutively to respond automatically. The default response to the **Enter** key does not work when **defaultFocus** is set to **true**.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 42| cancel | [VoidCallback](ts-types.md#voidcallback12) | No | Callback invoked when the dialog box is closed after the mask is clicked.<br>**Atomic service API**: This API can be used in atomic services since API version 11. | 43| alignment | [DialogAlignment](ts-methods-alert-dialog-box.md#dialogalignment) | No | Alignment mode of the dialog box in the vertical direction.<br>Default value: **DialogAlignment.Bottom**<br>**Atomic service API**: This API can be used in atomic services since API version 11.<br>**NOTE**<br>If **showInSubWindow** is set to **true** in **UIExtension**, the dialog box is aligned with the host window based on **UIExtension**.| 44| offset | [ActionSheetOffset](#actionsheetoffset18) | No | Offset of the dialog box relative to the alignment position.<br>Default value:<br>1. When alignment is set to **Top**, **TopStart**, or **TopEnd**: {dx: 0,dy: "40vp"}<br>2. When **alignment** is set to any other value: {dx: 0,dy: "-40vp"}<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 45| sheets | Array<[SheetInfo](#sheetinfo)> | Yes | Options in the dialog box. Each option supports the image, text, and callback.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 46| maskRect<sup>10+</sup> | [Rectangle](ts-methods-alert-dialog-box.md#rectangle8) | No | Mask area of the dialog box. Events outside the mask area are transparently transmitted, and events within the mask area are not.<br>Default value: **{ x: 0, y: 0, width: '100%', height: '100%' }**<br>**NOTE**<br>**maskRect** does not take effect when **showInSubWindow** is set to **true**.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 47| showInSubWindow<sup>11+</sup> | boolean | No| Whether to show the dialog box in a sub-window when the dialog box needs to be displayed outside the main window.<br>Default value: **false**<br>**NOTE**<br>A dialog box whose **showInSubWindow** attribute is **true** cannot trigger the display of another dialog box whose **showInSubWindow** attribute is also **true**.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 48| isModal<sup>11+</sup> | boolean | No| Whether the dialog box is a modal. A modal dialog box has a mask applied, while a non-modal dialog box does not.<br>Default value: **true**<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 49| backgroundColor<sup>11+</sup> | [ResourceColor](ts-types.md#resourcecolor) | No| Background color of the dialog box.<br>Default value: **Color.Transparent**<br>**NOTE**<br>When **backgroundColor** is set to a non-transparent color, **backgroundBlurStyle** must be set to **BlurStyle.NONE**; otherwise, the color display may not meet the expected effect.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 50| backgroundBlurStyle<sup>11+</sup> | [BlurStyle](ts-universal-attributes-background.md#blurstyle9) | No| Background blur style of the dialog box.<br>Default value: **BlurStyle.COMPONENT_ULTRA_THICK**<br>**NOTE**<br>Setting this parameter to **BlurStyle.NONE** disables the background blur. When **backgroundBlurStyle** is set to a value other than **NONE**, do not set **backgroundColor**. If you do, the color display may not produce the expected visual effect.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 51| backgroundBlurStyleOptions<sup>18+</sup> | [BackgroundBlurStyleOptions](ts-universal-attributes-background.md#backgroundblurstyleoptions10)| No| Options for customizing the background blur style.<br>**Atomic service API**: This API can be used in atomic services since API version 18.| 52| backgroundEffect<sup>18+</sup> | [BackgroundEffectOptions](ts-universal-attributes-background.md#backgroundeffectoptions11) | No| Options for customizing the background effect.<br>**Atomic service API**: This API can be used in atomic services since API version 18.| 53| onWillDismiss<sup>12+</sup> | Callback<[DismissDialogAction](#dismissdialogaction12)> | No| Callback for interactive closure of the dialog box.<br>**NOTE**<br>1. If this callback is registered, the dialog box will not be closed immediately after the user touches the mask or the Back button, presses the Esc key, or swipes left or right on the screen. The **reason** parameter in the callback is used to determine whether the dialog box can be closed. The reason returned by the component does not support the value **CLOSE_BUTTON**.<br>2. In the **onWillDismiss** callback, another **onWillDismiss** callback is not allowed.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 54| cornerRadius<sup>12+</sup> | [Dimension](ts-types.md#dimension10) \| [BorderRadiuses](ts-types.md#borderradiuses9) \| [LocalizedBorderRadiuses](ts-types.md#localizedborderradiuses12) | No| Corner radius of the background.<br>You can set the radius for each of the four corners individually.<br>Default value: **{ topLeft: '32vp', topRight: '32vp', bottomLeft: '32vp', bottomRight: '32vp' }**<br> The corner radius is subject to the component size, with the maximum value being half of the component width or height. If the value is negative, the default value is used.<br> When set to a percentage, the value defines the radius as a percentage of the parent component's width or height.<br>**NOTE**<br>When **cornerRadius** is of type LocalizedBorderRadiuses, the layout order can be dynamically adjusted based on the user's language settings.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 55| borderWidth<sup>12+</sup> | [Dimension](ts-types.md#dimension10) \| [EdgeWidths](ts-types.md#edgewidths9) \| [LocalizedEdgeWidths](ts-types.md#localizededgewidths12) | No| Border width of the dialog box.<br>You can set the width for all four sides or set separate widths for individual sides.<br>Default value: **0**<br> When set to a percentage, the value defines the border width as a percentage of the parent dialog box's width.<br>If the left and right borders are greater than its width, or the top and bottom borders are greater than its height, the dialog box may not display as expected.<br>**NOTE**<br>When **borderWidth** is of type LocalizedEdgeWidths, the layout order can be dynamically adjusted based on the user's language settings.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 56| borderColor<sup>12+</sup> | [ResourceColor](ts-types.md#resourcecolor) \| [EdgeColors](ts-types.md#edgecolors9) \| [LocalizedEdgeColors](ts-types.md#localizededgecolors12) | No| Border color of the dialog box.<br>Default value: **Color.Black**<br> **borderColor** must be used with **borderWidth** in pairs.<br>**NOTE**<br>When **borderColor** is of type LocalizedEdgeColors, the layout order can be dynamically adjusted based on the user's language settings.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 57| borderStyle<sup>12+</sup> | [BorderStyle](ts-appendix-enums.md#borderstyle) \| [EdgeStyles](ts-types.md#edgestyles9) | No| Border style of the dialog box.<br>Default value: **BorderStyle.Solid**<br> **borderStyle** must be used with **borderWidth** in pairs.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 58| width<sup>12+</sup> | [Dimension](ts-types.md#dimension10) | No| Width of the dialog box.<br>**NOTE**<br>- Default maximum width of the dialog box: 400 vp<br>- When this parameter is set to a percentage, the reference width of the dialog box is the width of the window where the dialog box is located. You can decrease or increase the width as needed.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 59| height<sup>12+</sup> | [Dimension](ts-types.md#dimension10) | No| Height of the dialog box.<br>**NOTE**<br>- Default maximum height of the dialog box: 0.9 x (Window height – Safe area)<br>- When this parameter is set to a percentage, the reference height of the dialog box is the height of the window where the dialog box is located minus the safe area. You can decrease or increase the height as needed.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 60| shadow<sup>12+</sup> | [ShadowOptions](ts-universal-attributes-image-effect.md#shadowoptions) \| [ShadowStyle](ts-universal-attributes-image-effect.md#shadowstyle10) | No| Shadow of the dialog box.<br> Default value on 2-in-1 devices: **ShadowStyle.OUTER_FLOATING_MD** when the dialog box is focused and **ShadowStyle.OUTER_FLOATING_SM** otherwise<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 61| transition<sup>12+</sup> | [TransitionEffect](ts-transition-animation-component.md#transitioneffect10) | No| Transition effect for the entrance and exit of the dialog box.<br>**NOTE**<br>1. If this parameter is not set, the default effect is used.<br>2. Touching the Back button during the entrance animation pauses the entrance animation and starts the exit animation. The final effect is one obtained after the curves of the entrance and exit animations are combined.<br>3. Touching the Back button during the exit animation does not affect the animation playback. Touching the Back button again closes the application.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 62| enableHoverMode<sup>14+</sup> | boolean | No | Whether to enable the hover mode.<br>Default value: **false**, meaning not to enable the hover mode.<br>**Atomic service API**: This API can be used in atomic services since API version 14.| 63| hoverModeArea<sup>14+</sup> | [HoverModeAreaType](ts-appendix-enums.md#hovermodeareatype14) | No | Display area of the dialog box in hover mode.<br>Default value: **HoverModeAreaType.BOTTOM_SCREEN**<br>**Atomic service API**: This API can be used in atomic services since API version 14.| 64| onWillAppear<sup>18+</sup> | Callback<void> | No| Event callback when the dialog box is about to appear.<br>**NOTE**<br>1. The normal timing sequence is as follows: onWillAppear > onDidAppear > onWillDisappear > onDidDisappear.<br>2. You can set the callback event for changing the dialog box display effect in **onWillAppear**. The settings take effect next time the dialog box appears.<br>**Atomic service API**: This API can be used in atomic services since API version 18.| 65| onDidAppear<sup>18+</sup> | Callback<void> | No| Event callback when the dialog box appears.<br>**NOTE**<br>1. The normal timing sequence is as follows: onWillAppear > onDidAppear > onWillDisappear > onDidDisappear.<br>2. You can set the callback event for changing the dialog box display effect in **onDidAppear**. The settings take effect next time the dialog box appears.<br>3. If the dialog is dismissed before its entrance animation is finished, the animation will be interrupted, and **onDidAppear** will not be triggered.<br>**Atomic service API**: This API can be used in atomic services since API version 18.| 66| onWillDisappear<sup>18+</sup> | Callback<void> | No| Event callback when the dialog box is about to disappear.<br>**NOTE**<br>1. The normal timing sequence is as follows: onWillAppear > onDidAppear > onWillDisappear > onDidDisappear.<br> **Atomic service API**: This API can be used in atomic services since API version 18.| 67| onDidDisappear<sup>18+</sup> | Callback<void> | No| Event callback when the dialog box disappears.<br>**NOTE**<br>1. The normal timing sequence is as follows: onWillAppear > onDidAppear > onWillDisappear > onDidDisappear.<br>**Atomic service API**: This API can be used in atomic services since API version 18.| 68| levelMode<sup>15+</sup> | [LevelMode](#levelmode15) | No | Display level of the dialog box.<br>**NOTE**<br>- Default value: **LevelMode.OVERLAY.**<br>- This parameter takes effect only when **showInSubWindow** is set to **false**.<br>**Atomic service API**: This API can be used in atomic services since API version 15.| 69| levelUniqueId<sup>15+</sup> | number | No | [Unique ID](../js-apis-arkui-frameNode.md#getuniqueid12) of the node under the display level for the page-level dialog box.<br>**NOTE**<br>- This parameter takes effect only when **levelMode** is set to **LevelMode.EMBEDDED**.<br>**Atomic service API**: This API can be used in atomic services since API version 15.| 70| immersiveMode<sup>15+</sup> | [ImmersiveMode](#immersivemode15) | No | Mask effect for the page-level dialog box.<br>**NOTE**<br>- Default value: **ImmersiveMode.DEFAULT**<br>- This parameter takes effect only when **levelMode** is set to **LevelMode.EMBEDDED**.<br>**Atomic service API**: This API can be used in atomic services since API version 15.| 71| levelOrder<sup>18+</sup> | [LevelOrder](../js-apis-promptAction.md#levelorder18) | No | Display order of the dialog box.<br>**NOTE**<br>- Default value: **LevelOrder.clamp(0)**<br>- Dynamic updating is not supported.<br>**Atomic service API**: This API can be used in atomic services since API version 18.| 72 73## SheetInfo 74 75**Atomic service API**: This API can be used in atomic services since API version 11. 76 77**System capability**: SystemCapability.ArkUI.ArkUI.Full 78 79| Name| Type | Mandatory| Description | 80| ------ | ------------------------------------------------------------ | ---- | ----------------- | 81| title | string \| [Resource](ts-types.md#resource) | Yes | Sheet text.<br>If the text is too long to display, a scrollbar is displayed.| 82| icon | string \| [Resource](ts-types.md#resource) | No | Sheet icon. By default, no icon is displayed.<br>The string type can be used to load local images and, more frequently, online images. The value can be a relative path to a local image, for example, **Image("common/test.jpg")**.| 83| action | [VoidCallback](ts-types.md#voidcallback12) | Yes | Callback when the sheet is selected.| 84 85## LevelMode<sup>15+</sup> 86 87type LevelMode = LevelMode 88 89Defines the display level for the dialog box. 90 91**Atomic service API**: This API can be used in atomic services since API version 15. 92 93**System capability**: SystemCapability.ArkUI.ArkUI.Full 94 95| Type | Description | 96| ----------------------------------------------------------- | -------------------- | 97| [LevelMode](../js-apis-promptAction.md#levelmode15) | Display level of the dialog box.| 98 99## ImmersiveMode<sup>15+</sup> 100 101type ImmersiveMode = ImmersiveMode 102 103Defines the mask effect for the dialog box. 104 105**Atomic service API**: This API can be used in atomic services since API version 15. 106 107**System capability**: SystemCapability.ArkUI.ArkUI.Full 108 109| Type | Description | 110| ------------------------------------------------------------ | -------------------------- | 111| [ImmersiveMode](../js-apis-promptAction.md#immersivemode15) | Mask effect for the page-level dialog box.| 112 113## DismissDialogAction<sup>12+</sup> 114 115Provides information about the action to dismiss the dialog box. 116 117**Atomic service API**: This API can be used in atomic services since API version 12. 118 119**System capability**: SystemCapability.ArkUI.ArkUI.Full 120 121### Properties 122 123| Name | Type | Readable| Writable| Description | 124| ------- | ------------------------------------------------------------ | ---- | ---- | ------------------------------------------------------------ | 125| dismiss | Callback<void> | No | No | Callback for dismissing the dialog box. This API is called only when the dialog box needs to be exited.| 126| reason | [DismissReason](../js-apis-promptAction.md#dismissreason12) | No | No | Reason why the dialog box cannot be dismissed. You must specify whether to close the dialog box for each of the listed actions.| 127 128## ActionSheetButtonOptions<sup>18+</sup> 129 130**Atomic service API**: This API can be used in atomic services since API version 18. 131 132**System capability**: SystemCapability.ArkUI.ArkUI.Full 133 134| Name | Type | Mandatory| Description| 135| ------------ | ------- | ---- | ---- | 136| enabled<sup>10+</sup> | boolean | No | Whether to respond when the button is clicked. The value **true** means to respond when the button is clicked, and **false** means the opposite.<br>Default value: **true**<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 137| defaultFocus<sup>10+</sup> | boolean | No | Whether the button is the default focus. The value **true** means that the button is the default focus, and **false** means the opposite.<br>Default value: **false**<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 138| style<sup>10+</sup> | [DialogButtonStyle](ts-appendix-enums.md#dialogbuttonstyle10) | No | Button style.<br>Default value: **DialogButtonStyle.DEFAULT**<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 139| value<sup>8+</sup> | string \| [Resource](ts-types.md#resource) | Yes | Button text.<br>If the text is too long to display, it is truncated with an ellipsis (...).<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 140| action<sup>8+</sup> | [VoidCallback](ts-types.md#voidcallback12) | Yes | Callback invoked when the button is selected.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 141 142## ActionSheetOffset<sup>18+</sup> 143 144**Atomic service API**: This API can be used in atomic services since API version 18. 145 146**System capability**: SystemCapability.ArkUI.ArkUI.Full 147 148| Name| Type | Mandatory| Description | 149| ---- | ------------------------------------------------------------ | ---- | ---------------------------------- | 150| dx | number \| string \| [Resource](ts-types.md#resource) | Yes | Offset of the action sheet along the x-axis relative to the alignment position.<br>String type. Specify the length unit explicitly, for example, **'10px'**, or provide the length in percentage, for example, **'100%'**.<br>**NOTE**<br>If the unit is not specified, the default unit vp is used, in which case '10' is equivalent to 10 vp.| 151| dy | number \| string \| [Resource](ts-types.md#resource) | Yes | Offset of the action sheet along the y-axis relative to the alignment position.<br>String type. Specify the length unit explicitly, for example, **'10px'**, or provide the length in percentage, for example, **'100%'**.<br>**NOTE**<br>If the unit is not specified, the default unit vp is used, in which case '10' is equivalent to 10 vp.| 152 153## Example 154 155> **NOTE** 156> 157> For clarity in UI execution context, use the [showActionSheet](../js-apis-arkui-UIContext.md#showactionsheet) API in [UIContext](../js-apis-arkui-UIContext.md#uicontext). 158 159### Example 1: Displaying an Action Sheet 160 161This example demonstrates how to display an action sheet when a button is touched. 162 163```ts 164@Entry 165@Component 166struct ActionSheetExample { 167 build() { 168 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 169 Button('Click to Show ActionSheet') 170 .onClick(() => { 171 ActionSheet.show ({ // You are advised to use this.getUIContext().showActionSheet(). 172 title: 'ActionSheet title', 173 subtitle: 'ActionSheet subtitle', 174 message: 'message', 175 autoCancel: true, 176 confirm: { 177 defaultFocus: true, 178 value: 'Confirm button', 179 action: () => { 180 console.log('Get Alert Dialog handled') 181 } 182 }, 183 cancel: () => { 184 console.log('actionSheet canceled') 185 }, 186 onWillDismiss:(dismissDialogAction: DismissDialogAction)=> { 187 console.info("reason=" + JSON.stringify(dismissDialogAction.reason)) 188 console.log("dialog onWillDismiss") 189 if (dismissDialogAction.reason == DismissReason.PRESS_BACK) { 190 dismissDialogAction.dismiss() 191 } 192 if (dismissDialogAction.reason == DismissReason.TOUCH_OUTSIDE) { 193 dismissDialogAction.dismiss() 194 } 195 }, 196 alignment: DialogAlignment.Bottom, 197 offset: { dx: 0, dy: -10 }, 198 sheets: [ 199 { 200 title: 'apples', 201 action: () => { 202 console.log('apples') 203 } 204 }, 205 { 206 title: 'bananas', 207 action: () => { 208 console.log('bananas') 209 } 210 }, 211 { 212 title: 'pears', 213 action: () => { 214 console.log('pears') 215 } 216 } 217 ] 218 }) 219 }) 220 }.width('100%') 221 .height('100%') 222 } 223} 224``` 225 226 227 228### Example 2: Opening an Action Sheet Outside the Main Window 229 230This example demonstrates how to configure an action sheet to display outside the main window on a 2-in-1 device by setting **showInSubWindow** to **true**. 231 232```ts 233@Entry 234@Component 235struct ActionSheetExample { 236 build() { 237 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 238 Button('Click to Show ActionSheet') 239 .onClick(() => { 240 ActionSheet.show({ 241 title: 'ActionSheet title', 242 subtitle: 'ActionSheet subtitle', 243 message: 'message', 244 autoCancel: true, 245 showInSubWindow: true, 246 isModal: true, 247 confirm: { 248 defaultFocus: true, 249 value: 'Confirm button', 250 action: () => { 251 console.log('Get Alert Dialog handled') 252 } 253 }, 254 cancel: () => { 255 console.log('actionSheet canceled') 256 }, 257 onWillDismiss:(dismissDialogAction: DismissDialogAction)=> { 258 console.info("reason=" + JSON.stringify(dismissDialogAction.reason)) 259 console.log("dialog onWillDismiss") 260 if (dismissDialogAction.reason == DismissReason.PRESS_BACK) { 261 dismissDialogAction.dismiss() 262 } 263 if (dismissDialogAction.reason == DismissReason.TOUCH_OUTSIDE) { 264 dismissDialogAction.dismiss() 265 } 266 }, 267 alignment: DialogAlignment.Center, 268 offset: { dx: 0, dy: -10 }, 269 sheets: [ 270 { 271 title: 'apples', 272 action: () => { 273 console.log('apples') 274 } 275 }, 276 { 277 title: 'bananas', 278 action: () => { 279 console.log('bananas') 280 } 281 }, 282 { 283 title: 'pears', 284 action: () => { 285 console.log('pears') 286 } 287 } 288 ] 289 }) 290 }) 291 }.width('100%') 292 .height('100%') 293 } 294} 295``` 296 297 298 299### Example 3: Setting the Action Sheet Animation 300This example illustrates how to use the **transition** API to create custom animation effects for the dialog box's appearance and disappearance. 301 302```ts 303@Entry 304@Component 305struct ActionSheetExample { 306 build() { 307 Column({ space: 5 }) { 308 Button('ActionSheet Set Duration') 309 .onClick(() => { 310 ActionSheet.show({ 311 title: 'ActionSheet 1', 312 message: 'Set Animation Duration open 3 second, close 100 ms', 313 autoCancel: true, 314 alignment: DialogAlignment.Top, 315 transition:TransitionEffect.asymmetric(TransitionEffect.OPACITY 316 .animation({ duration: 3000, curve: Curve.Sharp }).combine(TransitionEffect.scale({x: 1.5, y: 1.5}).animation({duration: 3000, curve: Curve.Sharp})), 317 TransitionEffect.OPACITY.animation({ duration: 100, curve: Curve.Smooth }) 318 .combine(TransitionEffect.scale({x: 0.5, y: 0.5}).animation({duration: 100, curve: Curve.Smooth}))), 319 offset: { dx: 0, dy: -20 }, 320 confirm: { 321 value: 'button', 322 action: () => { 323 console.info('Button-clicking callback') 324 } 325 }, 326 cancel: () => { 327 console.info('Closed callbacks') 328 }, 329 sheets: [ 330 { 331 title: 'apples', 332 action: () => { 333 console.log('apples') 334 } 335 }, 336 { 337 title: 'bananas', 338 action: () => { 339 console.log('bananas') 340 } 341 }, 342 { 343 title: 'pears', 344 action: () => { 345 console.log('pears') 346 } 347 } 348 ] 349 }) 350 }).backgroundColor(0x317aff).height("88px") 351 }.width('100%').margin({ top: 5 }) 352 } 353} 354``` 355 356 357 358### Example 4: Setting the Action Sheet Style 359This example demonstrates how to set styles of an action sheet, including the width, height, background color, and shadow. 360```ts 361@Entry 362@Component 363struct ActionSheetExample { 364 build() { 365 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) { 366 Button('Click to Show ActionSheet') 367 .onClick(() => { 368 ActionSheet.show({ 369 title: 'ActionSheet title', 370 subtitle: 'ActionSheet subtitle', 371 message: 'message', 372 autoCancel: true, 373 width: 300, 374 height: 350, 375 cornerRadius: 20, 376 borderWidth: 1, 377 borderStyle: BorderStyle.Solid,// borderStyle must be used with borderWidth in pairs. 378 borderColor: Color.Blue,// borderColor must be used with borderWidth in pairs. 379 backgroundColor: Color.White, 380 shadow: ({ radius: 20, color: Color.Grey, offsetX: 50, offsetY: 0}), 381 confirm: { 382 defaultFocus: true, 383 value: 'Confirm button', 384 action: () => { 385 console.log('Get Alert Dialog handled') 386 } 387 }, 388 cancel: () => { 389 console.log('actionSheet canceled') 390 }, 391 onWillDismiss:(dismissDialogAction: DismissDialogAction)=> { 392 console.info("reason=" + JSON.stringify(dismissDialogAction.reason)) 393 console.log("dialog onWillDismiss") 394 if (dismissDialogAction.reason == DismissReason.PRESS_BACK) { 395 dismissDialogAction.dismiss() 396 } 397 if (dismissDialogAction.reason == DismissReason.TOUCH_OUTSIDE) { 398 dismissDialogAction.dismiss() 399 } 400 }, 401 alignment: DialogAlignment.Bottom, 402 offset: { dx: 0, dy: -10 }, 403 sheets: [ 404 { 405 title: 'apples', 406 action: () => { 407 console.log('apples') 408 } 409 }, 410 { 411 title: 'bananas', 412 action: () => { 413 console.log('bananas') 414 } 415 }, 416 { 417 title: 'pears', 418 action: () => { 419 console.log('pears') 420 } 421 } 422 ] 423 }) 424 }) 425 }.width('100%') 426 } 427} 428``` 429 430 431 432### Example 5: Configuring an Action Sheet in the Hover State 433 434This example demonstrates how to set the layout area of an action sheet in hover mode on a foldable device. 435 436```ts 437@Entry 438@Component 439struct ActionSheetExample { 440 build() { 441 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 442 Button('Click to Show ActionSheet') 443 .onClick(() => { 444 ActionSheet.show ({ // You are advised to use this.getUIContext().showActionSheet(). 445 title: 'ActionSheet title', 446 subtitle: 'ActionSheet subtitle', 447 message: 'message', 448 autoCancel: true, 449 confirm: { 450 defaultFocus: true, 451 value: 'Confirm button', 452 action: () => { 453 console.log('Get Alert Dialog handled') 454 } 455 }, 456 cancel: () => { 457 console.log('actionSheet canceled') 458 }, 459 onWillDismiss:(dismissDialogAction: DismissDialogAction)=> { 460 console.info("reason=" + JSON.stringify(dismissDialogAction.reason)) 461 console.log("dialog onWillDismiss") 462 if (dismissDialogAction.reason == DismissReason.PRESS_BACK) { 463 dismissDialogAction.dismiss() 464 } 465 if (dismissDialogAction.reason == DismissReason.TOUCH_OUTSIDE) { 466 dismissDialogAction.dismiss() 467 } 468 }, 469 alignment: DialogAlignment.Bottom, 470 offset: { dx: 0, dy: -10 }, 471 enableHoverMode: true, 472 hoverModeArea: HoverModeAreaType.TOP_SCREEN, 473 sheets: [ 474 { 475 title: 'apples', 476 action: () => { 477 console.log('apples') 478 } 479 }, 480 { 481 title: 'bananas', 482 action: () => { 483 console.log('bananas') 484 } 485 }, 486 { 487 title: 'pears', 488 action: () => { 489 console.log('pears') 490 } 491 } 492 ] 493 }) 494 }) 495 }.width('100%') 496 .height('100%') 497 } 498} 499``` 500 501 502
