CODEWITHSUNDEEP
drawermaterial-components-web
Rod
Rod

Reputation: 2170

Material Components Web - Persistent and Perminent Drawer are Not Displayed as Expected

I am following the Material Components Web docs. As a template of the page I am using the very basic template as detailed in the quick start - My undertsnading is that this template is a "including all" template: it uses: node_modules/material-components-web/dist/material-components-web.css and, https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js (complete code below)

Seem like Persistent Drawer and Permanent Drawer are not displayed as expected. Not slidable, not aside to the left, not stretching its height.

Note that the Temporary drawer does work as expected.

What am I missing?

<!DOCTYPE html>

Material Components for the web 

<aside class="mdc-persistent-drawer mdc-typography">
<nav class="mdc-persistent-drawer__drawer">
    <header class="mdc-persistent-drawer__header">
    <div class="mdc-persistent-drawer__header-content">
        Header here
    </div>
    </header>
    <nav id="icon-with-text-demo" class="mdc-persistent-drawer__content mdc-list">
    <a class="mdc-list-item mdc-persistent-drawer--selected" href="#">
        <i class="material-icons mdc-list-item__start-detail" aria-hidden="true">inbox</i>Inbox
    </a>
    <a class="mdc-list-item" href="#">
        <i class="material-icons mdc-list-item__start-detail" aria-hidden="true">star</i>Star
    </a>
    </nav>
</nav>
</aside>


<h2 class="mdc-typography--display2">Hello, Material Components!</h2>
<div class="mdc-textfield" data-mdc-auto-init="MDCTextfield">
  <input type="text" class="mdc-textfield__input" id="demo-input">
  <label for="demo-input" class="mdc-textfield__label">Tell us how you feel!</label>
</div>


<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
<script>window.mdc.autoInit();</script>


<script>
    let drawer = new mdc.drawer.MDCPersistentDrawer(document.querySelector('.mdc-persistent-drawer'));
    drawer.open = true;
</script>

Upvotes: 0

Views: 1093

Answers (1)

Rod
Rod

Reputation: 2170

In order to be displayed as expected, meaning: aside to the left, stretching vertically with 100% height, some css style need to be added. Style values can be taken from the demos package: here. Also note the classes added to the body element as detailed in the permanent drawer demo.

Upvotes: 1

Related Questions