Package org.patternfly.component.drawer


package org.patternfly.component.drawer
Provides the PatternFly drawer component and its subcomponents for displaying a collapsible panel alongside content.

A drawer is a sliding panel that enters from the start, end, or bottom of the viewport. It can be used for task-based information, such as detail panels, help panels, or notification centers. The drawer supports overlay and inline modes, resizable panels, and configurable positions.

Usage

A basic drawer with a toggle button:
import static org.patternfly.component.button.Button.button;
import static org.patternfly.component.drawer.Drawer.drawer;
import static org.patternfly.component.drawer.DrawerBody.drawerBody;
import static org.patternfly.component.drawer.DrawerCloseButton.drawerCloseButton;
import static org.patternfly.component.drawer.DrawerContent.drawerContent;
import static org.patternfly.component.drawer.DrawerPanel.drawerPanel;
import static org.patternfly.component.drawer.DrawerPanelHead.drawerPanelHead;

Drawer drawer = drawer();
button("Toggle drawer").primary()
        .onClick((event, btn) -> drawer.toggle());
drawer
        .addContent(drawerContent()
                .addBody(drawerBody().text("Main content")))
        .addPanel(drawerPanel()
                .addHead(drawerPanelHead()
                        .add(span().text("Panel content"))
                        .addCloseButton(drawerCloseButton())));
A drawer with the panel positioned at the start:
import static org.patternfly.component.drawer.Drawer.drawer;
import static org.patternfly.component.drawer.DrawerBody.drawerBody;
import static org.patternfly.component.drawer.DrawerContent.drawerContent;
import static org.patternfly.component.drawer.DrawerPanel.drawerPanel;
import static org.patternfly.component.drawer.Position.start;

drawer().position(start)
        .addContent(drawerContent()
                .addBody(drawerBody().text("Main content")))
        .addPanel(drawerPanel());
See Also: