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 10 11## ActionSheet.show 12 13show(value: { title: string | Resource, message: string | Resource, confirm?: {value: string | Resource, action:() => void}, cancel?:()=>void, sheets: Array<SheetInfo>, autoCancel?:boolean, alignment?: DialogAlignment, offset?: { dx: number | string | Resource; dy: number | string | Resource } }) 14 15Defines and shows the action sheet. 16 17**Parameters** 18 19| Name | Type | Mandatory | Description | 20| ---------- | -------------------------- | ------- | ----------------------------- | 21| title | [Resource](ts-types.md#resource) \| string | Yes | Title of the dialog box.| 22| message | [Resource](ts-types.md#resource) \| string | Yes | Content of the dialog box. | 23| autoCancel | boolean | No | Whether to close the dialog box when the overlay is clicked.<br>Default value: **true**| 24| confirm | {<br>value: [ResourceStr](ts-types.md#resourcestr),<br>action: () => void<br>} | No | Text content of the confirm button and callback upon button clicking.<br>Default value:<br>**value**: button text.<br>**action**: callback upon button clicking.| 25| cancel | () => void | No | Callback invoked when the dialog box is closed after the overlay is clicked. | 26| 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**| 27| offset | {<br>dx: Length,<br>dy: Length<br>} | No | Offset of the dialog box relative to the alignment position.<br>Default value: {<br>dx: 0,<br>dy: 0<br>} | 28| sheets | Array<SheetInfo> | Yes | Options in the dialog box. Each option supports the image, text, and callback.| 29 30## SheetInfo 31 32| Name| Type | Mandatory| Description | 33| ------ | ------------------------------------------------------------ | ---- | ----------------- | 34| title | [ResourceStr](ts-types.md#resourcestr) | Yes | Sheet text. | 35| icon | [ResourceStr](ts-types.md#resourcestr) | No | Sheet icon. By default, no icon is displayed. | 36| action | ()=>void | Yes | Callback when the sheet is selected.| 37 38 39## Example 40 41 42```ts 43@Entry 44@Component 45struct ActionSheetExample { 46 build() { 47 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 48 Button('Click to Show ActionSheet') 49 .onClick(() => { 50 ActionSheet.show({ 51 title: 'ActionSheet title', 52 message: 'message', 53 autoCancel: true, 54 confirm: { 55 value: 'Confirm button', 56 action: () => { 57 console.log('Get Alert Dialog handled') 58 } 59 }, 60 cancel: () => { 61 console.log('actionSheet canceled') 62 }, 63 alignment: DialogAlignment.Bottom, 64 offset: { dx: 0, dy: -10 }, 65 sheets: [ 66 { 67 title: 'apples', 68 action: () => { 69 console.log('apples') 70 } 71 }, 72 { 73 title: 'bananas', 74 action: () => { 75 console.log('bananas') 76 } 77 }, 78 { 79 title: 'pears', 80 action: () => { 81 console.log('pears') 82 } 83 } 84 ] 85 }) 86 }) 87 }.width('100%') 88 .height('100%') 89 } 90} 91``` 92 93 94
