1# Action Sheet 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](../apis/js-apis-arkui-UIContext.md#uicontext). 10> 11> Since API version 10, you can use the [showActionSheet](../apis/js-apis-arkui-UIContext.md#showactionsheet) API in [UIContext](../apis/js-apis-arkui-UIContext.md#uicontext) to obtain the UI context. 12 13## ActionSheet.show 14 15show(value: ActionSheetOptions) 16 17Shows an action sheet in the given settings. 18 19**System capability**: SystemCapability.ArkUI.ArkUI.Full 20 21**Parameters** 22 23| Name| Type | Mandatory| Description. | 24| ------ | ------------------------------------------------- | ---- | ------------------------ | 25| value | [ActionSheetOptions](#actionsheetoptions) | Yes | Parameters of the action sheet.| 26 27## ActionSheetOptions 28 29| Name | Type | Mandatory | Description | 30| ---------- | -------------------------- | ------- | ----------------------------- | 31| title | [Resource](ts-types.md#resource) \| string | Yes | Title of the dialog box.| 32| subtitle<sup>10+</sup> | [ResourceStr](ts-types.md#resourcestr) | No| Subtitle of the dialog box.| 33| message | [Resource](ts-types.md#resource) \| string | Yes | Content of the dialog box. | 34| 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.| 35| confirm | {<br>enabled<sup>10+</sup>?: boolean,<br>defaultFocus<sup>10+</sup>?: boolean,<br>style<sup>10+</sup>?: [DialogButtonStyle](#dialogbuttonstyle10),<br>value: [ResourceStr](ts-types.md#resourcestr),<br>action: () => void<br>} | No | Information about the confirm button.<br>**enabled**: whether the button responds to clicks. The value **true** means that the button responds to clicks, and **false** means the opposite.<br>Default value: **true**<br>**defaultFocus**: 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>**style**: button style.<br>Default value: **DialogButtonStyle.DEFAULT**<br>**value**: button text.<br>**action**: Button: callback upon button clicking.| 36| cancel | () => void | No | Callback invoked when the dialog box is closed after the overlay is clicked. | 37| 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**| 38| offset | {<br>dx: [Length](ts-types.md#length),<br>dy: [Length](ts-types.md#length)<br>} | 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"}| 39| sheets | Array<[SheetInfo](#sheetinfo)> | Yes | Options in the dialog box. Each option supports the image, text, and callback.| 40| 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%' }**| 41 42## SheetInfo 43 44| Name| Type | Mandatory| Description | 45| ------ | ------------------------------------------------------------ | ---- | ----------------- | 46| title | [ResourceStr](ts-types.md#resourcestr) | Yes | Sheet text. | 47| icon | [ResourceStr](ts-types.md#resourcestr) | No | Sheet icon. By default, no icon is displayed. | 48| action | ()=>void | Yes | Callback when the sheet is selected.| 49 50## DialogButtonStyle<sup>10+</sup> 51 52| Name | Description | 53| --------- | --------------------------------- | 54| DEFAULT | Blue text on white background (black background under the dark theme).| 55| HIGHLIGHT | White text on blue background. | 56 57 58## Example 59 60 61```ts 62@Entry 63@Component 64struct ActionSheetExample { 65 build() { 66 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 67 Button('Click to Show ActionSheet') 68 .onClick(() => { 69 ActionSheet.show({ 70 title: 'ActionSheet title', 71 subtitle: 'ActionSheet subtitle', 72 message: 'message', 73 autoCancel: true, 74 confirm: { 75 defaultFocus: true, 76 value: 'Confirm button', 77 action: () => { 78 console.log('Get Alert Dialog handled') 79 } 80 }, 81 cancel: () => { 82 console.log('actionSheet canceled') 83 }, 84 alignment: DialogAlignment.Bottom, 85 offset: { dx: 0, dy: -10 }, 86 sheets: [ 87 { 88 title: 'apples', 89 action: () => { 90 console.log('apples') 91 } 92 }, 93 { 94 title: 'bananas', 95 action: () => { 96 console.log('bananas') 97 } 98 }, 99 { 100 title: 'pears', 101 action: () => { 102 console.log('pears') 103 } 104 } 105 ] 106 }) 107 }) 108 }.width('100%') 109 .height('100%') 110 } 111} 112``` 113 114 115
