Drawer

ic.Drawer is a slide-in panel that enters from any edge of its parent container. It works well for secondary content that should be accessible without leaving the current view, like settings panels, detail inspectors, or navigation menus. Unlike ic.Dialog, it does not demand a decision from the user before they can return to the main content.

Drawer is an ic.mixin.Overlay and must be added to containers that inherit from ic.mixin.AllowsOverlay (like the Frame). It is added via addOverlay(), not addChild().

Side, title, and closing behavior

Side controls which edge the drawer slides in from: left, right, top, or bottom. Title sets the heading in the drawer header. Closable toggles whether the X button and Escape key are available. Overlay controls the dimmed backdrop behind the panel: set it to false for a drawer that sits alongside the content without blocking interaction. When the backdrop is visible, CloseOnBackdropClick determines whether clicking it dismisses the drawer.

Controls

Body content and bindClose

You populate the drawer by adding child components to the "body" target. The panel scrolls automatically if the content overflows. To let a button inside the drawer close it, use bindClose: it wires a click listener that sets Open to false and fires the Closed event, the same as if the user pressed the X button or Escape.

Events

Drawer fires a single Closed event when the user dismisses it (via the X button, Escape, or backdrop click). The bindOpen and bindClose convenience methods let you wire other components to open or close the drawer on click, just like on ic.Dialog.

Events
No events fired yet

Custom styling

The drawer panel uses BEM classes you can target with css.style(): .ic-drawer__panel for the sliding container, .ic-drawer__header for the top bar, .ic-drawer__title for the heading, .ic-drawer__body for the scrollable content area, and .ic-drawer__backdrop for the dimmed overlay.

dw = ic.Drawer("Title", "Console", "Side", "bottom", "Size", "sm");

dw.css.style(".ic-drawer__panel", ...
    "background", "#1e1e2e", ...
    "border_top", "2px solid #89b4fa", ...
    "box_shadow", "0 -4px 24px rgba(0, 0, 0, 0.5)");

dw.css.style(".ic-drawer__header", ...
    "background", "#181825", ...
    "border_bottom", "1px solid #313244");

dw.css.style(".ic-drawer__title", ...
    "color", "#cdd6f4", ...
    "font_family", "monospace", ...
    "font_size", "0.8rem", ...
    "letter_spacing", "0.05em");

dw.css.style(".ic-drawer__body", ...
    "font_family", "monospace", ...
    "font_size", "0.8rem", ...
    "color", "#a6adc8");
Compatibility note. Figures run in different browsers depending on Matlabs version and operating system. CSS features like linear-gradient, backdrop-filter, or newer color functions may not work everywhere. For reference, MATLAB R2024b uses Chromium 104. Always test your custom styles in the MATLAB version you are targeting, and use canIuse to check compatibility of specific CSS features if you know the browser version MATLAB is using. Use the Developer Tools component to inspect the DOM structure of each component and find the right selectors for styling.