sunweb

Side drawer

component js

Definition


Side drawer component solve the design problem of having side content someway hidden on the page. It has the capabilities to open and close, drawing from one side to the center.

The component also comes with a backdrop that blocks completely the document interactivity and scrolling. Clicking on the backdrop will close the side drawer.

The component has three optional main placeholders: header, body and footer like a block object. The body is auto overflown vertically with scroll if the content does not fit in.

c-side-drawer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dignissimos dolorem doloremque enim inventore laborum neque, non quaerat soluta? Architecto at cumque earum, eum ipsa ipsum maxime sunt vero voluptates.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus at atque consectetur cupiditate, debitis dignissimos dolorem eligendi est hic, ipsum iure nemo perspiciatis soluta! Beatae doloremque enim laudantium pariatur quasi.


c-side-drawer--origin right

The origin property determines the offset position of the drawer. Possible values are "left" and "right".

This is a Side Drawer from the right

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dignissimos dolorem doloremque enim inventore laborum neque, non quaerat soluta? Architecto at cumque earum, eum ipsa ipsum maxime sunt vero voluptates.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus at atque consectetur cupiditate, debitis dignissimos dolorem eligendi est hic, ipsum iure nemo perspiciatis soluta! Beatae doloremque enim laudantium pariatur quasi.


c-side-drawer--until sml

The until property defines a breakpoint where the side drawer stops being a hidden drawer, and makes the body content visible where it is placed. Header and footer content will remain hidden. This feature is useful and used on main menu. The current available breakpoints are "sm", "sml" and "md".

I am the side drawer body content. To see me working as a drawer, resize your viewport on smaller width.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus at atque consectetur cupiditate, debitis dignissimos dolorem eligendi est hic, ipsum iure nemo perspiciatis soluta! Beatae doloremque enim laudantium pariatur quasi.


c-side-drawer--until and c-side-drawer--origin sml, top

I am the side drawer body content. To see me working as a drawer, resize your viewport on smaller width.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus at atque consectetur cupiditate, debitis dignissimos dolorem eligendi est hic, ipsum iure nemo perspiciatis soluta! Beatae doloremque enim laudantium pariatur quasi.