# Action Sheet (ActionSheet)
An action sheet is a dialog box that displays actions a user can take.
> **NOTE**
>
> The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
>
> 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).
>
> 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.
## ActionSheet.show
show(value: ActionSheetOptions)
Shows an action sheet in the given settings.
**System capability**: SystemCapability.ArkUI.ArkUI.Full
**Parameters**
| Name| Type | Mandatory| Description. |
| ------ | ------------------------------------------------- | ---- | ------------------------ |
| value | [ActionSheetOptions](#actionsheetoptions) | Yes | Parameters of the action sheet.|
## ActionSheetOptions
| Name | Type | Mandatory | Description |
| ---------- | -------------------------- | ------- | ----------------------------- |
| title | [Resource](ts-types.md#resource) \| string | Yes | Title of the dialog box.|
| subtitle10+ | [ResourceStr](ts-types.md#resourcestr) | No| Subtitle of the dialog box.|
| message | [Resource](ts-types.md#resource) \| string | Yes | Content of the dialog box. |
| autoCancel | boolean | No | Whether to close the dialog box when the overlay is clicked.
Default value: **true**
The value **true** means to close the dialog box when the overlay is clicked, and **false** means the opposite.|
| confirm | {
enabled10+?: boolean,
defaultFocus10+?: boolean,
style10+?: [DialogButtonStyle](#dialogbuttonstyle10),
value: [ResourceStr](ts-types.md#resourcestr),
action: () => void
} | No | Information about the confirm button.
**enabled**: whether the button responds to clicks. The value **true** means that the button responds to clicks, and **false** means the opposite.
Default value: **true**
**defaultFocus**: whether the button is the default focus. The value **true** means that the button is the default focus, and **false** means the opposite.
Default value: **false**
**style**: button style.
Default value: **DialogButtonStyle.DEFAULT**
**value**: button text.
**action**: Button: callback upon button clicking.|
| cancel | () => void | No | Callback invoked when the dialog box is closed after the overlay is clicked. |
| alignment | [DialogAlignment](ts-methods-alert-dialog-box.md#dialogalignment) | No | Alignment mode of the dialog box in the vertical direction.
Default value: **DialogAlignment.Bottom**|
| offset | {
dx: [Length](ts-types.md#length),
dy: [Length](ts-types.md#length)
} | No | Offset of the dialog box relative to the alignment position.
Default value:
1. When alignment is set to **Top**, **TopStart**, or **TopEnd**: {dx: 0,dy: "40vp"}
2. When **alignment** is set to any other value: {dx: 0,dy: "-40vp"}|
| sheets | Array<[SheetInfo](#sheetinfo)> | Yes | Options in the dialog box. Each option supports the image, text, and callback.|
| maskRect10+ | [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.
Default value: **{ x: 0, y: 0, width: '100%', height: '100%' }**|
| showInSubWindow11+ | boolean | No| Whether to show the dialog box in a sub-window when the dialog box needs to be displayed outside the main window.
Default value: **false**
**NOTE**
A dialog box whose **showInSubWindow** attribute is **true** cannot trigger the display of another dialog box whose **showInSubWindow** attribute is also **true**.|
| isModal11+ | 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.
Default value: **true**|
| backgroundColor11+ | [ResourceColor](ts-types.md#resourcecolor) | No| Backplane color of the dialog box.
Default value: **Color.Transparent**|
| backgroundBlurStyle11+ | [BlurStyle](ts-appendix-enums.md#blurstyle9) | No| Background blur style of the dialog box.
Default value: **BlurStyle.COMPONENT_ULTRA_THICK**|
## SheetInfo
| Name| Type | Mandatory| Description |
| ------ | ------------------------------------------------------------ | ---- | ----------------- |
| title | [ResourceStr](ts-types.md#resourcestr) | Yes | Sheet text. |
| icon | [ResourceStr](ts-types.md#resourcestr) | No | Sheet icon. By default, no icon is displayed. |
| action | ()=>void | Yes | Callback when the sheet is selected.|
## DialogButtonStyle10+
| Name | Description |
| --------- | --------------------------------- |
| DEFAULT | Blue text on white background (black background under the dark theme).|
| HIGHLIGHT | White text on blue background. |
## Example
### Example 1
```ts
@Entry
@Component
struct ActionSheetExample {
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Button('Click to Show ActionSheet')
.onClick(() => {
ActionSheet.show({
title: 'ActionSheet title',
subtitle: 'ActionSheet subtitle',
message: 'message',
autoCancel: true,
confirm: {
defaultFocus: true,
value: 'Confirm button',
action: () => {
console.log('Get Alert Dialog handled')
}
},
cancel: () => {
console.log('actionSheet canceled')
},
alignment: DialogAlignment.Bottom,
offset: { dx: 0, dy: -10 },
sheets: [
{
title: 'apples',
action: () => {
console.log('apples')
}
},
{
title: 'bananas',
action: () => {
console.log('bananas')
}
},
{
title: 'pears',
action: () => {
console.log('pears')
}
}
]
})
})
}.width('100%')
.height('100%')
}
}
```
### Example 2
```ts
@Entry
@Component
struct ActionSheetExample {
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Button('Click to Show ActionSheet')
.onClick(() => {
ActionSheet.show({
title: 'ActionSheet title',
subtitle: 'ActionSheet subtitle',
message: 'message',
autoCancel: true,
showInSubWindow: true,
isModal: true,
confirm: {
defaultFocus: true,
value: 'Confirm button',
action: () => {
console.log('Get Alert Dialog handled')
}
},
cancel: () => {
console.log('actionSheet canceled')
},
alignment: DialogAlignment.Center,
offset: { dx: 0, dy: -10 },
sheets: [
{
title: 'apples',
action: () => {
console.log('apples')
}
},
{
title: 'bananas',
action: () => {
console.log('bananas')
}
},
{
title: 'pears',
action: () => {
console.log('pears')
}
}
]
})
})
}.width('100%')
.height('100%')
}
}
```
