Question

我第一次开始使用material web components处理新项目。我正在尝试使用他们的持久抽屉与页面上的英雄部分，我也有一个工具栏。

模板如下所示：

<div id="app">
  <aside class="mdc-drawer mdc-drawer--persistent mdc-typography">
    <nav class="mdc-drawer__drawer">
      <header class="mdc-drawer__header">
        <div class="mdc-drawer__header-content">
          Header here
        </div>
      </header>
      <nav id="icon-with-text-demo" class="mdc-drawer__content mdc-list">
        <a class="mdc-list-item mdc-list-item--activated" href="#">
          <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>Inbox
        </a>
        <a class="mdc-list-item" href="#">
          <i class="material-icons mdc-list-item__graphic" aria-hidden="true">star</i>Star
        </a>
      </nav>
    </nav>
  </aside>
  <header class="mdc-toolbar mdc-toolbar--fixed demo-toolbar">
    <div class="mdc-toolbar__row">
      <section class="menu mdc-toolbar__section mdc-toolbar__section--align-start">
        <a href="#" class="material-icons mdc-toolbar__menu-icon">menu</a>
        <span class="mdc-toolbar__title">Title</span>
      </section>
      <section class="mdc-toolbar__section">
        Section aligns to center.
      </section>
      <section class="mdc-toolbar__section mdc-toolbar__section--align-end" role="toolbar">
        <a href="#" class="material-icons mdc-toolbar__icon" aria-label="Download" alt="Download">file_download</a>
        <a href="#" class="material-icons mdc-toolbar__icon" aria-label="Print this page" alt="Print this page">print</a>
        <a href="#" class="material-icons mdc-toolbar__icon" aria-label="Bookmark this page" alt="Bookmark this page">bookmark</a>
      </section>
    </div>
  </header>
  <div class="page-content">
     <div class="landing-page-hero">
     </div>
  </div>
</div>

我没有太多的CSS，我已经从他们的demo css中复制page-content并为landing-page-her添加了c：

body {
  margin:0;
}
.page-content {
  display: inline-flex;
  flex-direction: column;
  flex-grow: 1;
  height: 100%;
  box-sizing: border-box;
}
.landing-page-hero {
  min-height: 400px;
  height: 45vh;
  width: 100vw;
  background-image: url('/img/hero-image.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 90% 60%;
  display: flex;
  align-items: center;
  color: $white;
}

由于某种原因，当我的div元素包含整个页面的id="app"时，抽屉不会打开。我使用此div元素来挂载Vue。

因此，如果我删除此元素，则抽屉将打开，但仅在图像上方：

但是，就像我说的那样，我需要使用此元素来装载Vue，当我拥有它时，单击drawer和{{1}时menu不可见} {}不是hero的{{1}}，而toolbar的{{1}}就是margin-bottom。{/ p>

我该如何使这项工作？那么，我有一个带抽屉的工具栏和工具栏正下方的英雄部分？

Answer 1

我在#app元素上安装Vue后修复了js问题部分并要求材料包：

display

然后，在css中，我已将#app的display: flex设置为notification.php，然后就可以了。

CSS - 使用英雄部分实现抽屉的材料Web组件

1 个答案: