0
Material 구성 요소 웹 docs을 따르고 있습니다. 페이지의 템플릿으로 퀵 스타트에서 자세하게 설명 된 것처럼 아주 기본적인 템플릿을 사용하고 있습니다 - 내 밑줄은이 템플릿이 "모두 포함"템플릿이라는 것입니다 : node_modules/material-components-web/dist/material -components-web.css 하고, https://unpkg.com/[email protected]/dist/material-components-web.min.js (아래 전체 코드)재료 구성 요소 웹 - 영구 및 Perminent 서랍이 예상대로 표시되지 않습니다.
는 영구 서랍처럼 보일 예상대로 영구 서랍이 표시되지 않습니다. 미끄러지지 않고 왼쪽으로 치우 치지 않고 높이를 기지개하지 않습니다.
임시 서랍이 예상대로 작동합니다.
무엇이 누락 되었습니까? 100 % 신장 세로 연신 제쳐두고 왼쪽 예상대로 웹 위하여
<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/[email protected]/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>
문제점을 발견했습니다 - 일부 스타일을 추가해야합니다 - 예상대로 표시 되려면 왼쪽을 제외하고 100 % 높이로 세로로 늘리십시오. 스타일을 추가해야합니다. 스타일은 데모 패키지 (https://material-components-web.appspot.com/drawer/permanent-drawer-below-toolbar.html)에서 가져올 수 있습니다. 또한 데모에서 설명한대로 body 요소에 추가 된 클래스에 주목하십시오. – Rod