如何在 Material Components Web 中构建抽屉？答案

【问题标题】：How do I build a drawer in Material Components Web?如何在 Material Components Web 中构建抽屉？
【发布时间】：2018-06-20 18:57:31
【问题描述】：

我刚刚进入 Material Components for the Web，我希望有一个类似于 this 的网站，尽管我尝试了文档中的代码（显然不完整）并得到了 this。我怎样才能得到类似示例的内容？

【问题讨论】：

标签： web material-design material-components material-components-web

【解决方案1】：

MDC-Web 提供了一个抽屉组件，但没有应用程序的布局，这个抽屉可以与内容进行迭代，因此您应该自己编写所需的布局。而且，除此之外，您还需要进行 CSS 重置以在浏览器中一致地设置某些元素的样式。这不是库的不完整，而是它的理念——只为开发人员提供 Material Design 组件而不是“一体化”解决方案。这句话摘自他们的GitHub issues：

我们的目标不是成为一个框架并为它做很多小功能开发商。它只是提供材料设计规范的以可重用的方式将组件添加到 Web 中。而已。任何东西超出了项目试图达到的范围达到。

因此，在 MDC-Web 提供的链接中，您可以看到 CSS 样式应用于 html、body 等元素及其布局。即，这个：

html {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.demo-content {
  display: flex;
  flex: 1 1 auto;
  height: 100%;
  box-sizing: border-box;
}

.demo-main {
  padding: 16px;
}

您可以view the demo on Codepen 询问我是否需要进一步说明。

【讨论】：

谢谢，帮了大忙。