web - 如何在 Material Components Web 中构建抽屉？

Question

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

Answer 1

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

目标不是成为一个框架并为开发人员做很多小功能。它只是以可重用的方式将 Material Design Specification 的组件提供给 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;
}

您可以在 Codepen 上查看演示并询问我是否需要进一步说明。