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