Modals and drawers

Overview

Modal and drawer components are efficient layer frames that provide simple interactions in various layer scenarios. Content in a modal is centered. Content in a drawer appears on the left or right. This creates different visual and interactive experiences.

Scenarios

• Modal component: Displays content in the center. Use modals for important information or operations that require user attention, such as warnings, notifications, or confirmation dialog boxes.

• Drawer component: Displays content on the left or right. Use drawers to provide additional features or details without obscuring the main page, such as sidebar menus, data panels, or settings.

Addition methods

• Drag from the component list: Select a modal or drawer component from the component list on the left and drag it to the canvas.

• Add from the Frame & Component Tree panel: In the Frame & Component Tree panel, click the + button to add a modal or drawer component directly to the canvas.

Common APIs

The common APIs for modal and drawer components include the following two methods and one property:

• show method: Displays the layer.

modalFrame.show();
drawerFrame.show();

• close method: Closes the layer.

modalFrame.close();
drawerFrame.close();

• hidden property: Indicates whether the current layer is hidden. Use this property to check the visibility of the layer.

console.log(modalFrame.hidden); // true or false
console.log(drawerFrame.hidden); // true or false

These methods and properties can be called from external components or from the layer component itself to show or hide the layer.

Build inside layer components

• When a layer component is displayed, you can drag other components from the component list into the layer component. This process is the same as building components on the canvas.

• To easily work with a layer component, click it in the Frame & Component Tree panel. This displays the layer and lets you add, modify, or delete its content.

Summary

The modal and drawer components in the Mobi Platform offer a flexible and efficient solution for implementing layers. You can use these components and their APIs to create user-friendly interactive experiences and build efficient page designs.