search

Daemonite / material

Material Design for Bootstrap 4
http://daemonite.github.io/material/
MIT License
3.2k stars 720 forks source link

Example of using nav drawer? #143

Closed matthewgoslett closed 6 years ago

matthewgoslett commented 6 years ago

Are there any examples/documentation on using the nav-drawer, using latest v4.0.0 beta?

sesemaya commented 6 years ago

We haven't documented navigation drawer yet. Will add it to the doc site in the next release.

In the meantime, you can refer http://daemonite.github.io/material/docs/4.0/getting-started/introduction/ as a live demo.

A few different types of navigation drawers are also already supported:

Default (no specific type is defined) opens above all other content at all times:

<button data-toggle="navdrawer" ...>...</button>
<div class="navdrawer" ...>...</div>

Permanent opens above all other content on smaller screens but is pinned to one edge of the screen on larger screens:

<button data-toggle="navdrawer" data-type="permanent" ...>...</button>
<div class="navdrawer navdrawer-permanent" ...>...</div>

Permanent navigation drawers also have two variations: .navdrawer-permanent-clipped is clipped under a navbar fixed to the top of the screen .navdrawer-permanent-float is clipped under a navbar and removes background-colour/border so that it blends in with the body content (like Inbox)

Persistent opens above all other content on smaller screens but sits on the same surface elevation as the content on larger screens:

<button data-toggle="navdrawer" data-type="persistent" ...>...</button>
<div class="navdrawer navdrawer-persistent" ...>...</div>

N.B. If permanent or persistent navigation drawer is used, you need to add your own CSS to push the body content aside to make room for the navigation drawer on larger screens.

matthewgoslett commented 6 years ago

Thanks! It works perfectly.

sesemaya commented 6 years ago

Docs for navigation drawer has been added in 11d2422.