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 overlay is clicked.<br>Default value: **true**<br>The value **true** means to close the dialog box when the overlay 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 overlay 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| 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.| 52| 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.| 53| 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.| 54| 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.| 55| 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.| 56| 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.| 57| 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.| 58| 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.| 59| 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.| 60| 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.| 61| 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.| 62| 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.| 63| 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.| 64| immersiveMode<sup>15+</sup> | [ImmersiveMode](#immersivemode15) | No | Overlay 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.| 65| 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.| 66 67## SheetInfo 68 69**Atomic service API**: This API can be used in atomic services since API version 11. 70 71**System capability**: SystemCapability.ArkUI.ArkUI.Full 72 73| Name| Type | Mandatory| Description | 74| ------ | ------------------------------------------------------------ | ---- | ----------------- | 75| title | string \| [Resource](ts-types.md#resource) | Yes | Sheet text.<br>If the text is too long to display, a scrollbar is displayed.| 76| 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")**.| 77| action | [VoidCallback](ts-types.md#voidcallback12) | Yes | Callback when the sheet is selected.| 78 79## LevelMode<sup>15+</sup> 80 81type LevelMode = LevelMode 82 83Defines the display level for the dialog box. 84 85**Atomic service API**: This API can be used in atomic services since API version 15. 86 87**System capability**: SystemCapability.ArkUI.ArkUI.Full 88 89| Type | Description | 90| ----------------------------------------------------------- | -------------------- | 91| [LevelMode](../js-apis-promptAction.md#levelmode15) | Display level of the dialog box.| 92 93## ImmersiveMode<sup>15+</sup> 94 95type ImmersiveMode = ImmersiveMode 96 97Defines the overlay effect for the dialog box. 98 99**Atomic service API**: This API can be used in atomic services since API version 15. 100 101**System capability**: SystemCapability.ArkUI.ArkUI.Full 102 103| Type | Description | 104| ------------------------------------------------------------ | -------------------------- | 105| [ImmersiveMode](../js-apis-promptAction.md#immersivemode15) | Overlay effect for the page-level dialog box.| 106 107## DismissDialogAction<sup>12+</sup> 108 109Provides information about the action to dismiss the dialog box. 110 111**Atomic service API**: This API can be used in atomic services since API version 12. 112 113**System capability**: SystemCapability.ArkUI.ArkUI.Full 114 115### Properties 116 117| Name | Type | Readable| Writable| Description | 118| ------- | ------------------------------------------------------------ | ---- | ---- | ------------------------------------------------------------ | 119| dismiss | Callback<void> | No | No | Callback for dismissing the dialog box. This API is called only when the dialog box needs to be exited.| 120| 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.| 121 122## ActionSheetButtonOptions<sup>18+</sup> 123 124**Atomic service API**: This API can be used in atomic services since API version 18. 125 126**System capability**: SystemCapability.ArkUI.ArkUI.Full 127 128| Name | Type | Mandatory| Description| 129| ------------ | ------- | ---- | ---- | 130| 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.| 131| 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.| 132| 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.| 133| 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.| 134| 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.| 135 136## ActionSheetOffset<sup>18+</sup> 137 138**Atomic service API**: This API can be used in atomic services since API version 18. 139 140**System capability**: SystemCapability.ArkUI.ArkUI.Full 141 142| Name| Type | Mandatory| Description | 143| ---- | ------------------------------------------------------------ | ---- | ---------------------------------- | 144| 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.| 145| 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.| 146 147## Example 148 149> **NOTE** 150> 151> For clarity in UI execution context, use the [showActionSheet](../js-apis-arkui-UIContext.md#showactionsheet) API in [UIContext](../js-apis-arkui-UIContext.md#uicontext). 152 153### Example 1: Displaying an Action Sheet 154 155This example demonstrates how to display an action sheet when a button is touched. 156 157```ts 158@Entry 159@Component 160struct ActionSheetExample { 161 build() { 162 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 163 Button('Click to Show ActionSheet') 164 .onClick(() => { 165 ActionSheet.show ({ // You are advised to use this.getUIContext().showActionSheet(). 166 title: 'ActionSheet title', 167 subtitle: 'ActionSheet subtitle', 168 message: 'message', 169 autoCancel: true, 170 confirm: { 171 defaultFocus: true, 172 value: 'Confirm button', 173 action: () => { 174 console.log('Get Alert Dialog handled') 175 } 176 }, 177 cancel: () => { 178 console.log('actionSheet canceled') 179 }, 180 onWillDismiss:(dismissDialogAction: DismissDialogAction)=> { 181 console.info("reason=" + JSON.stringify(dismissDialogAction.reason)) 182 console.log("dialog onWillDismiss") 183 if (dismissDialogAction.reason == DismissReason.PRESS_BACK) { 184 dismissDialogAction.dismiss() 185 } 186 if (dismissDialogAction.reason == DismissReason.TOUCH_OUTSIDE) { 187 dismissDialogAction.dismiss() 188 } 189 }, 190 alignment: DialogAlignment.Bottom, 191 offset: { dx: 0, dy: -10 }, 192 sheets: [ 193 { 194 title: 'apples', 195 action: () => { 196 console.log('apples') 197 } 198 }, 199 { 200 title: 'bananas', 201 action: () => { 202 console.log('bananas') 203 } 204 }, 205 { 206 title: 'pears', 207 action: () => { 208 console.log('pears') 209 } 210 } 211 ] 212 }) 213 }) 214 }.width('100%') 215 .height('100%') 216 } 217} 218``` 219 220 221 222### Example 2: Opening an Action Sheet Outside the Main Window 223 224This 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**. 225 226```ts 227@Entry 228@Component 229struct ActionSheetExample { 230 build() { 231 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 232 Button('Click to Show ActionSheet') 233 .onClick(() => { 234 ActionSheet.show({ 235 title: 'ActionSheet title', 236 subtitle: 'ActionSheet subtitle', 237 message: 'message', 238 autoCancel: true, 239 showInSubWindow: true, 240 isModal: true, 241 confirm: { 242 defaultFocus: true, 243 value: 'Confirm button', 244 action: () => { 245 console.log('Get Alert Dialog handled') 246 } 247 }, 248 cancel: () => { 249 console.log('actionSheet canceled') 250 }, 251 onWillDismiss:(dismissDialogAction: DismissDialogAction)=> { 252 console.info("reason=" + JSON.stringify(dismissDialogAction.reason)) 253 console.log("dialog onWillDismiss") 254 if (dismissDialogAction.reason == DismissReason.PRESS_BACK) { 255 dismissDialogAction.dismiss() 256 } 257 if (dismissDialogAction.reason == DismissReason.TOUCH_OUTSIDE) { 258 dismissDialogAction.dismiss() 259 } 260 }, 261 alignment: DialogAlignment.Center, 262 offset: { dx: 0, dy: -10 }, 263 sheets: [ 264 { 265 title: 'apples', 266 action: () => { 267 console.log('apples') 268 } 269 }, 270 { 271 title: 'bananas', 272 action: () => { 273 console.log('bananas') 274 } 275 }, 276 { 277 title: 'pears', 278 action: () => { 279 console.log('pears') 280 } 281 } 282 ] 283 }) 284 }) 285 }.width('100%') 286 .height('100%') 287 } 288} 289``` 290 291 292 293### Example 3: Setting the Action Sheet Animation 294This example illustrates how to use the **transition** API to create custom animation effects for the dialog box's appearance and disappearance. 295 296```ts 297@Entry 298@Component 299struct ActionSheetExample { 300 build() { 301 Column({ space: 5 }) { 302 Button('ActionSheet Set Duration') 303 .onClick(() => { 304 ActionSheet.show({ 305 title: 'ActionSheet 1', 306 message: 'Set Animation Duration open 3 second, close 100 ms', 307 autoCancel: true, 308 alignment: DialogAlignment.Top, 309 transition:TransitionEffect.asymmetric(TransitionEffect.OPACITY 310 .animation({ duration: 3000, curve: Curve.Sharp }).combine(TransitionEffect.scale({x: 1.5, y: 1.5}).animation({duration: 3000, curve: Curve.Sharp})), 311 TransitionEffect.OPACITY.animation({ duration: 100, curve: Curve.Smooth }) 312 .combine(TransitionEffect.scale({x: 0.5, y: 0.5}).animation({duration: 100, curve: Curve.Smooth}))), 313 offset: { dx: 0, dy: -20 }, 314 confirm: { 315 value: 'button', 316 action: () => { 317 console.info('Button-clicking callback') 318 } 319 }, 320 cancel: () => { 321 console.info('Closed callbacks') 322 }, 323 sheets: [ 324 { 325 title: 'apples', 326 action: () => { 327 console.log('apples') 328 } 329 }, 330 { 331 title: 'bananas', 332 action: () => { 333 console.log('bananas') 334 } 335 }, 336 { 337 title: 'pears', 338 action: () => { 339 console.log('pears') 340 } 341 } 342 ] 343 }) 344 }).backgroundColor(0x317aff).height("88px") 345 }.width('100%').margin({ top: 5 }) 346 } 347} 348``` 349 350 351 352### Example 4: Setting the Action Sheet Style 353This example demonstrates how to set styles of an action sheet, including the width, height, background color, and shadow. 354```ts 355@Entry 356@Component 357struct ActionSheetExample { 358 build() { 359 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) { 360 Button('Click to Show ActionSheet') 361 .onClick(() => { 362 ActionSheet.show({ 363 title: 'ActionSheet title', 364 subtitle: 'ActionSheet subtitle', 365 message: 'message', 366 autoCancel: true, 367 width: 300, 368 height: 350, 369 cornerRadius: 20, 370 borderWidth: 1, 371 borderStyle: BorderStyle.Solid,// borderStyle must be used with borderWidth in pairs. 372 borderColor: Color.Blue,// borderColor must be used with borderWidth in pairs. 373 backgroundColor: Color.White, 374 shadow: ({ radius: 20, color: Color.Grey, offsetX: 50, offsetY: 0}), 375 confirm: { 376 defaultFocus: true, 377 value: 'Confirm button', 378 action: () => { 379 console.log('Get Alert Dialog handled') 380 } 381 }, 382 cancel: () => { 383 console.log('actionSheet canceled') 384 }, 385 onWillDismiss:(dismissDialogAction: DismissDialogAction)=> { 386 console.info("reason=" + JSON.stringify(dismissDialogAction.reason)) 387 console.log("dialog onWillDismiss") 388 if (dismissDialogAction.reason == DismissReason.PRESS_BACK) { 389 dismissDialogAction.dismiss() 390 } 391 if (dismissDialogAction.reason == DismissReason.TOUCH_OUTSIDE) { 392 dismissDialogAction.dismiss() 393 } 394 }, 395 alignment: DialogAlignment.Bottom, 396 offset: { dx: 0, dy: -10 }, 397 sheets: [ 398 { 399 title: 'apples', 400 action: () => { 401 console.log('apples') 402 } 403 }, 404 { 405 title: 'bananas', 406 action: () => { 407 console.log('bananas') 408 } 409 }, 410 { 411 title: 'pears', 412 action: () => { 413 console.log('pears') 414 } 415 } 416 ] 417 }) 418 }) 419 }.width('100%') 420 } 421} 422``` 423 424 425 426### Example 5: Configuring an Action Sheet in the Hover State 427 428This example demonstrates how to set the layout area of an action sheet in hover mode on a foldable device. 429 430```ts 431@Entry 432@Component 433struct ActionSheetExample { 434 build() { 435 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 436 Button('Click to Show ActionSheet') 437 .onClick(() => { 438 ActionSheet.show ({ // You are advised to use this.getUIContext().showActionSheet(). 439 title: 'ActionSheet title', 440 subtitle: 'ActionSheet subtitle', 441 message: 'message', 442 autoCancel: true, 443 confirm: { 444 defaultFocus: true, 445 value: 'Confirm button', 446 action: () => { 447 console.log('Get Alert Dialog handled') 448 } 449 }, 450 cancel: () => { 451 console.log('actionSheet canceled') 452 }, 453 onWillDismiss:(dismissDialogAction: DismissDialogAction)=> { 454 console.info("reason=" + JSON.stringify(dismissDialogAction.reason)) 455 console.log("dialog onWillDismiss") 456 if (dismissDialogAction.reason == DismissReason.PRESS_BACK) { 457 dismissDialogAction.dismiss() 458 } 459 if (dismissDialogAction.reason == DismissReason.TOUCH_OUTSIDE) { 460 dismissDialogAction.dismiss() 461 } 462 }, 463 alignment: DialogAlignment.Bottom, 464 offset: { dx: 0, dy: -10 }, 465 enableHoverMode: true, 466 hoverModeArea: HoverModeAreaType.TOP_SCREEN, 467 sheets: [ 468 { 469 title: 'apples', 470 action: () => { 471 console.log('apples') 472 } 473 }, 474 { 475 title: 'bananas', 476 action: () => { 477 console.log('bananas') 478 } 479 }, 480 { 481 title: 'pears', 482 action: () => { 483 console.log('pears') 484 } 485 } 486 ] 487 }) 488 }) 489 }.width('100%') 490 .height('100%') 491 } 492} 493``` 494 495 496
