材料组件Web - 持久性和重要的抽屉未按预期显示

Question

我正在关注Material Components网站docs。作为页面的模板，我使用了快速入门中详细介绍的非常基本的模板 - 我的未解决方案是这个模板是一个＆＃34;包括所有＆＃34;模板： 它用： node_modules /材料组件的Web / DIST /材料组件-web.css 和， https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js （下面的完整代码）

像持久抽屉和永久抽屉似乎未按预期显示。不可滑动，不在左边，不能拉伸它的高度。

请注意，临时抽屉可以按预期工作。

我错过了什么？

<input type="text" id="getCity" placeholder="Enter"></input>
<button id="btn" type="Submit">Submit</button>

       Web的材料组件           

var z = 0;
$('#btn').click(function() {
  window.z = 1
});
console.log(z)

Answer 1

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