• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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: { title: string | Resource, subtitle: Resource, message: string | Resource, confirm?: {enabled?: boolean, defaultFocus?: boolean, style?: DialogButtonStyle, value: string | Resource, action:() => void}, cancel?:()=>void, sheets: Array<SheetInfo>, autoCancel?:boolean, alignment?: DialogAlignment, offset?: { dx: number | string | Resource; dy: number | string | Resource } })
16
17Defines and shows the action sheet.
18
19**Parameters**
20
21| Name       | Type                   | Mandatory | Description                         |
22| ---------- | -------------------------- | ------- | ----------------------------- |
23| title      | [Resource](ts-types.md#resource) \| string | Yes    |  Title of the dialog box.|
24| subtitle<sup>10+</sup> | [ResourceStr](ts-types.md#resourcestr) | No| Subtitle of the dialog box.|
25| message    | [Resource](ts-types.md#resource) \| string | Yes    | Content of the dialog box. |
26| 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.|
27| 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: () =&gt; void<br>} | No | Information about the confirm button.<br>**enabled**: whether to respond when the button is clicked.<br>Default value: **true**<br>**defaultFocus**: whether the button is the default focus.<br>Default value: **false**<br>**style**: button style.<br>Default value: **DialogButtonStyle.DEFAULT**<br>**value**: button text.<br>**action**: callback upon button clicking.|
28| cancel     | () =&gt; void           | No    | Callback invoked when the dialog box is closed after the overlay is clicked.  |
29| 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**|
30| offset     | {<br>dx: Length,<br>dy: Length<br>} | No     | Offset of the dialog box relative to the alignment position.{<br>dx: 0,<br>dy: 0<br>} |
31| sheets     | Array&lt;SheetInfo&gt; | Yes      | Options in the dialog box. Each option supports the image, text, and callback.|
32| maskRect<sup>10+</sup> | [Rectangle](ts-methods-alert-dialog-box.md#rectangle10) | 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%' }**|
33
34## SheetInfo
35
36| Name| Type                                                    | Mandatory| Description         |
37| ------ | ------------------------------------------------------------ | ---- | ----------------- |
38| title  | [ResourceStr](ts-types.md#resourcestr) | Yes  | Sheet text.      |
39| icon   | [ResourceStr](ts-types.md#resourcestr) | No  | Sheet icon. By default, no icon is displayed.    |
40| action | ()=&gt;void                                          | Yes  | Callback when the sheet is selected.|
41
42## DialogButtonStyle<sup>10+</sup>
43
44| Name     | Description.                             |
45| --------- | --------------------------------- |
46| DEFAULT   | Blue text on white background (black background under the dark theme).|
47| HIGHLIGHT | White text on blue background.                       |
48
49
50## Example
51
52
53```ts
54@Entry
55@Component
56struct ActionSheetExample {
57  build() {
58    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
59      Button('Click to Show ActionSheet')
60        .onClick(() => {
61          ActionSheet.show({
62            title: 'ActionSheet title',
63            subtitle: 'ActionSheet subtitle',
64            message: 'message',
65            autoCancel: true,
66            confirm: {
67              defaultFocus: true,
68              value: 'Confirm button',
69              action: () => {
70                console.log('Get Alert Dialog handled')
71              }
72            },
73            cancel: () => {
74              console.log('actionSheet canceled')
75            },
76            alignment: DialogAlignment.Bottom,
77            offset: { dx: 0, dy: -10 },
78            sheets: [
79              {
80                title: 'apples',
81                action: () => {
82                  console.log('apples')
83                }
84              },
85              {
86                title: 'bananas',
87                action: () => {
88                  console.log('bananas')
89                }
90              },
91              {
92                title: 'pears',
93                action: () => {
94                  console.log('pears')
95                }
96              }
97            ]
98          })
99        })
100    }.width('100%')
101    .height('100%')
102  }
103}
104```
105
106![en-us_image_action](figures/en-us_image_action.gif)
107