Drawer

Drawer is a collapsible panel that allows you to toggle the content.

drawer

Component’s XML-name: drawer.

Basics

The definition of the drawer in the screen descriptor should have the following structure:

  1. CssLayout that contains both drawer and the rest of the screen layout, with jmix-drawer-layout style assigned.

  2. The drawer itself should include the following containers, those represent:

    1. Drawer header, with jmix-drawer-header style assigned.

    2. Drawer content, for example, SideMenu, with jmix-drawer-content style assigned.

    3. Drawer footer, with jmix-drawer-footer style assigned.

  3. A button placed within a drawer footer and used to toggle Drawer collapsed state.

Toggle

The toggle() method expands or collapses the drawer depending on its current state. For example, if the drawer is already collapsed, it will be expanded after calling the toggle() method, and vice versa.

You can also check the drawer’s current state using the isCollapsed() method.

Attributes

  • expandOnHover attribute sets a mode when the drawer is expanded on hover. Note that the collapse state is not changed. The default value is false.

Usage Example

The most common way to use the drawer is on the app’s main screen.

For example:

<layout>
    <cssLayout stylename="jmix-drawer-layout">
        <drawer id="drawer" expandOnHover="true">
            <cssLayout stylename="jmix-drawer-header"
                       width="100%">
                <hbox spacing="true">
                    <image id="logoImage"
                           stylename="c-app-icon"
                           scaleMode="SCALE_DOWN">
                        <theme path="branding/app-icon-menu.svg"/>
                    </image>
                    <label id="appTitleLabel"
                           stylename="app-title"
                           value="Application"/>
                </hbox>
            </cssLayout>

            <sideMenu id="sideMenu"
                      width="100%"
                      stylename="jmix-drawer-content"/>

            <cssLayout stylename="jmix-drawer-footer"
                       width="100%">
                <hbox align="BOTTOM_RIGHT">
                    <button id="collapseDrawerButton"
                            icon="CHEVRON_LEFT"
                            stylename="jmix-drawer-collapse-button"
                            description="mainMsg://sideMenuCollapse"
                    />
                </hbox>
            </cssLayout>
        </drawer>
        <hbox spacing="true" margin="true">
            <textArea height="300px"
                      width="125px"
                      caption="Text area #1"/>
            <textArea height="300px"
                      width="125px"
                      caption="Text area #2"/>
        </hbox>
    </cssLayout>
</layout>
@Autowired
private Drawer drawer;
@Autowired
private Button collapseDrawerButton;

@Subscribe("collapseDrawerButton")
public void onCollapseDrawerButtonClick(Button.ClickEvent event) {
    drawer.toggle(); (1)
    if (drawer.isCollapsed()) { (2)
        collapseDrawerButton.setIconFromSet(JmixIcon.CHEVRON_RIGHT);
    } else {
        collapseDrawerButton.setIconFromSet(JmixIcon.CHEVRON_LEFT);
    }
}
1 Toggle the drawer on the button click.
2 Change the button icon depending on the drawer state.

All XML Attributes