Drawer

An overlayer appearing to an edge of the page

Properties#

Name	Description
.drawer	The drawer component
.drawer-container	The drawer container with a default width `320px`
drawer-top drawer-bottom drawer-left drawer-right	The position of drawer to appear on the page.
.open :target	The switch to control drawer open/close
.is-drawer-open	A semantic class to attch on `body` element to restrict scroll behavior

Features#

default#

The default drawer container's background color is transparent. You may paint the color yourself.

<div class="drawer open left">
  <div class="drawer-container bg-white">
    <!-- your content -->
  </div>
</div>

container size#

Default container width/height is 320px.

width/height:

<!-- width -->
<div class="drawer open left">
  <div class="drawer-container bg-white" style="width: 500px">
    <!-- your content -->
  </div>
</div>

<!-- height -->
<div class="drawer open left">
  <div class="drawer-container bg-white" style="height: 500px">
    <!-- your content -->
  </div>
</div>