Drawers

There are 7 different types of drawers:

const {
  FULL_HEIGHT,
  CLIPPED,
  FLOATING,
  PERSISTENT,
  PERSISTENT_MINI,
  TEMPORARY,
  TEMPORARY_MINI,
} = Drawer.DrawerTypes;
Js

The TEMPORARY or TEMPORARY_MINI type must be used for mobile devices. By default, a TEMPORARY drawer will be used for mobile devices, a PERSISTENT drawer for tablets, and a FULL_HEIGHT drawer for desktops.

When a mini drawer is used, it will be unable to expand on its own. Another drawer must be created that is a non-mini version that gets expanded separately. The only reason for this is that animating the width for a drawer was sluggish on mobile devices at this time. It is recommended to use the NavigationDrawer component instead since it handles that for you.

To help with positioning components and elements with a drawer, a couple of utility classes have been created.

This class name will add the correct margin-left to drawer's relative so that it matches the current media's drawer's width. By default, this means it will apply margin-left: 264px; on tablet and desktop screens.

This class name will add the correct margin-left to a mini drawer's relative. Use it standalone without the md-drawer-relative class name.

This is a simple utility class that gets applied automatically to the nav items list in the drawer. It basically sets the height of the list to be height: calc(100vh - #{$current-toolbar-media-height});. This will allow the list to be scrollable.

The Drawer can be docked to the left or right of the screen. The size of the drawer depends on whether it has been docked on the left or right of the screen and the device type or screen size.

  • On mobile devices, the width of the drawer will be calc(100vw - 56px) and a max width of 320px.
  • On tablets and desktop screens, the width will be equal to the $md-drawer-tablet-width and $md-drawer-desktop-width but no more than 400px.
  • On mobile devices, the width of the drawer will be the entire viewport.
  • On tablets and desktops, the width of the drawer will be the size of its content.

The Drawer has some additional support built in for displaying navigation items, but it can also be used to render any content. This example will show how you can make a temporary right drawer to display more information about images.

network_wifinetwork_cellbattery_full12:30

Photos >Beach

    Since one of the main use cases of the Drawer is to act as navigation, there is some support for integrating with react-router.

    My site uses path params to fetch documentation/examples/SassDocs, you will need to navigate to a different route to actually view the demo. Please click the link below to see this example in action. The code for the example is still available here by clicking the code expander button.

    View Demo