0

我正在关注 Material Components Web文档。作为页面的模板，我使用的是快速入门中详述的非常基本的模板 - 我的理解是这个模板是一个“包括所有”模板：它使用：node_modules/material-components-web/dist/material-components -web.css 和 https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js （完整代码如下）

似乎 Persistent Drawer 和 Permanent Drawer 没有按预期显示。不可滑动，不向左偏，不拉伸高度。

请注意，临时抽屉确实按预期工作。

我错过了什么？

<!DOCTYPE html>

网页材质组件 

<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>

4

1 回答 1

1

为了按预期显示，意思是：左边，垂直拉伸100%高度，需要添加一些css样式。样式值可以从演示包中获取：here。另请注意添加到 body 元素中的类，如永久抽屉演示中所述。

于 2017-05-23T10:49:15.507 回答