#Drawer

A Drawer is a panel that slides in from an edge of the workspace. Use it for a menu, a filter list, an inspector or a detail view that the user opens and closes. A drawer on the Bottom or Top side is a sheet. The panel has a title, a description, a close button, your content and a footer. With a handle, the user drags the drawer to change its size or to close it.

How to add a drawer in UXML:

1. Declare the drawer in the UXML of a window or of the workspace. Put its content in it as child elements.
2. Put the footer controls in a child element with the class tb-drawer__footer.
3. Find the drawer in code and call Open from a button.

<tb:Drawer name="filters" title="Filters" description="Pick what the list shows." side="Right" size="280">
    <ui:Toggle label="Only favorites" />
    <ui:TextField label="Name" />
    <ui:VisualElement class="tb-drawer__footer">
        <ui:Button name="apply" text="Apply" />
    </ui:VisualElement>
</tb:Drawer>

var drawer = root.Q<Drawer>("filters");
root.Q<Button>("showFilters").clicked += () => drawer.Open();
root.Q<Button>("apply").clicked += drawer.Close;
drawer.Closed += () => Debug.Log("Filters closed");

How to make a drawer in code:

var drawer = new Drawer { Title = "Inventory", Side = DrawerSide.Bottom };
drawer.Add(new Label("12 items"));
drawer.Open(workspace); // the anchor: the workspace, or an element in it

How to make a bottom sheet that the user drags between half and full height:

<tb:Drawer name="inventory" title="Inventory" side="Bottom" show-handle="true" snap-points="0.5,1" />

var sheet = new Drawer { Title = "Inventory", Side = DrawerSide.Bottom, ShowHandle = true };
sheet.SnapPoints = new List<float> { 0.5f, 1f };
sheet.Footer.Add(new Button(sheet.Close) { text = "Done" });
sheet.Open(workspace);
sheet.SnapIndex = 1; // full height

• Escape, the gamepad cancel button, the close button and a press outside close a modal drawer.
• With ShowHandle, a drag on the handle or the header moves the edge of the panel. On release, the drawer slides to the nearest snap point in a short animation. With no snap points, it keeps the size where you let it go, and Size gets that size.
• With no snap points, a drag goes from a quarter of the workspace (or the size at the press, when that is smaller) up to the full workspace.
• A drag that leaves less than half of the smallest size closes the drawer.
• With two or more snap points, the handle takes the focus. The arrow keys and the gamepad stick go to the next snap point: away from the edge of the drawer makes it larger.
• A drawer can open a drawer. The new one shows above the first one. Escape closes the top one, and the focus goes back to the control that opened it.
• Tab and the arrow keys stay in a modal drawer. The workspace shortcuts do nothing while it is open.
• A drawer with Modal false lets the user work with the windows next to it. Give it a close button, or close it from your code, because a press outside does not close it.
• A drawer declared in UXML stays hidden until Open. It moves to the workspace while it is open, then goes back to its place.
• The drawer takes the classes of the nearest tb-style-scope above its UXML place, or above the anchor, as a MessageBox does.
• The drawer slides when the workspace has AnimationsEnabled. Without animations it shows and hides at once.

Tips:

• Use Size for a side menu that must fit long labels. Use the USS rule .tb-drawer__panel to set the size of every drawer in a theme.
• A bottom sheet with size="200" is a good place for a touch keyboard hint, a share list or the detail of a selected item.
• Use snap-points="0.5,1" with show-handle="true" for a sheet that opens at half height and that the user pulls to full height.
• A drawer without ShowHandle does not move with a drag. Keep the close button, so a pointer user has a way to close a drawer that is not modal.
• The drawer covers the workspace of the anchor, not the whole screen. For a drawer over the whole screen, give Open an anchor that is outside a workspace, such as the root of the document.
• An Escape in a TextField of the drawer first cancels the edit of that field. The next Escape closes the drawer.

#Styling

To make every drawer wider and slower:

.tb-drawer__panel { width: 420px; }
.tb-drawer--anim-in, .tb-drawer--anim-in > .tb-drawer__panel { transition-duration: 400ms; }