el-drawer

To create a slide-out side panel in Vue 3, bind a boolean value to the drawer's v-model attribute and toggle it to true. This displays contextual content alongside your page without requiring navigation away from the main view.

Yes, you can nest multiple drawers by using the append-to-body attribute. This ensures layered drawers stack correctly in the DOM, allowing you to build complex, contextual UI workflows without breaking the visual layout.

Yes, the drawer supports both modal and modeless experiences through the modal attribute. You can control background interaction using close-on-click-modal and modal-penetrable, allowing flexible contextual menu and form setups.

You can customize the drawer's header and footer using the header and footer slots. Additionally, attributes like header-class, body-class, and footer-class allow you to apply specific styling to different sections of the side panel.

Drawers support left, right, top, and bottom directions to fit various layouts. The resizable attribute allows users to dynamically adjust the width or height of the slide-out panel, which triggers resize-start, resize, and resize-end events.

Use the before-close attribute to execute custom logic before the drawer closes. This allows you to intercept the closing action, validate form data, or trigger cleanup routines before the panel is dismissed from the screen.