Drawer

import { AXDrawerModule } from '@acorex/components/drawer';

Drawer component is a sliding panel that emerges from the side of the screen, offering additional content or navigation options without occupying permanent space. It is ideal for menus, settings, or supplementary information, and can be easily toggled open or closed by the user.

Overview

In this section, you can test different options of this component and see the output in real time

Basic Drawer

Some contents...

Basic Drawer

Some contents...

Mode

Overlay

Disabled

Usage

A simple example of using ax-drawer

Preview

Code

Location

You can change location of ax-drawer with location property

Preview

Code

Mode

You can change mode of ax-drawer with mode property

Preview

Code

Design Tokens

Design tokens are variables that define the visual style of ACoreX components. You can use them to change colors, typography, spacing, and other visual aspects.

Default component colors use system surface colors.

--ax-comp-drawer-height	100%	Height of the drawer.
--ax-comp-drawer-bg-color	var(--ax-sys-color-surface)	Background color of the drawer. Defaults to the system's surface background color.
--ax-comp-drawer-header-padding	0.75rem	Padding of the drawer header.
--ax-comp-drawer-header-border-b-width	1px	Border bottom width of the drawer header.
--ax-comp-drawer-header-border-color	var(--ax-sys-border-color)	Border color of the drawer header. Defaults to the system's border color.
--ax-comp-drawer-footer-padding	0.75rem	Padding of the drawer footer.
--ax-comp-drawer-footer-border-t-width	1px	Border top width of the drawer footer.
--ax-comp-drawer-footer-border-color	var(--ax-sys-border-color)	Border color of the drawer footer. Defaults to the system's border color.
--ax-comp-drawer-footer-overlay	0.75rem	Overlay of the drawer footer.
--ax-comp-drawer-container-bg-color	0, 0, 0, 0.2	Background color of the drawer container's backdrop/overlay. Uses rgba black with 20% opacity.