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

Question

我刚刚接触 Material Web 组件，我想要一个类似 this, although I tried the code from the docs (that is obviously not complete) and got this 的网站。我怎样才能得到类似示例的东西？

Answer 1

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

The goal isn't to be a framework and do a lot of little functions for developers. It's simply to provide the Material Design Specification's components to the web in a re-usable way. That's it. Anything that is beyond that goes beyond the scope of what the project is trying to achieve.

因此，在 MDC-Web 提供的 link 中，您可以看到 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问我是否需要进一步说明。

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

How do I build a drawer in Material Components Web?

web

material-design

material-components

material-components-web