Modal Page Overview
Modal pages are interactive popups featuring expansive panels that display critical information or enable operations while maintaining the current context. Unlike conventional popup components, modal pages provide substantially more space for content, which you must populate with custom components. By default, these modal pages require explicit user interaction to dismiss. ArkUI offers two distinct types of modal pages: semi-modal and full-modal, each serving different interaction patterns.
-
Semi-modal: ideal for multi-form effects, allowing for various styles across different device widths. Users can dismiss the semi-modal page through side swiping, touching the mask, touching the close button, or pulling down.
-
Full-modal: designed for full-screen modal dialog boxes that demand user attention. By default, side swiping is required to dismiss the full-modal page.
Available APIs
| API | Description |
|---|---|
| bindContentCover | Use this API to display a full-modal page. It can work with the transition animation and shared element animation to implement complex transition animation effects, for example, displaying an image in full in the modal upon the click of a thumbnail. |
| bindSheet | Use this API to display a custom semi-modal page, for example, a sharing confirmation dialog box. |
| openBindSheet/ updateBindSheet/ closeBindSheet | Use this API for scenarios independent of UI components, such as global application launch, updates, and shutdowns. |
Specifications Constraints
- It is recommended that you use the dialog box APIs provided by UIContext, except for UI-less scenarios such as ServiceExtensionAbility. For details about other specifications constraints, see openBindSheet, updateBindSheet, and closeBindSheet.