Question

我刚刚进入Web的Material Components，我希望有一个类似this的网站，虽然我尝试了文档中的代码（显然不完整）并获得了{{3} }。我怎样才能得到类似的例子？

Answer 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并询问我是否需要进一步澄清。

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

1 个答案: