Material Design Web 1.0 и mdc-menu-surface - якорь как? - PullRequest
Новая
       27

Material Design Web 1.0 и mdc-menu-surface - якорь как?

1 голос
/ 03 мая 2019

Я экспериментирую с Material Design Web 1.0 и у меня вопрос, как правильно использовать mdc-menu-surface - anchor , чтобы меню появлялось ниже TopAppBar? 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' https://fonts.gstatic.com; script-src 'unsafe-inline' https://unpkg.com; style-src 'unsafe-inline' https://unpkg.com https://fonts.googleapis.com"/>
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Test</title>

    <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.css" rel="stylesheet"/>
    <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.js"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>

    <script type="module">
      const menu = mdc.menu.MDCMenu.attachTo(document.querySelector('.mdc-menu'));
      menu.open = false;
      document.getElementById('button1').addEventListener('click', () => menu.open = !menu.open);
    </script>
  </head>
  <body>
    <header class="mdc-top-app-bar mdc-top-app-bar--fixed mdc-menu-surface--anchor">
      <div class="mdc-top-app-bar__row">
        <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
          <a id="button1" href="#" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
          <span class="mdc-top-app-bar__title">Test</span>
        </section>
        <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
        </section>
      </div>
      <div class="mdc-menu mdc-menu-surface" tabindex="-1">
        <ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical">
          <li class="mdc-list-item" role="menuitem"><span class="mdc-list-item__text">Homepage</span></li>
          <li class="mdc-list-item" role="menuitem"><span class="mdc-list-item__text">Imprint</span></li>
          <li class="mdc-list-item" role="menuitem"><span class="mdc-list-item__text">Data privacy statement</span></li>
        </ul>
      </div>
    </header>

  </body>
</html>

TopAppBar выглядит так:

enter image description here

, но когда я открываю меню гамбургера, оно выглядит так:

enter image description here

Где я ожидал, что он откроется ниже меню гамбургера / TopAppBar.

Бонусный вопрос: Как сделать так, чтобы он открывался ниже TopAppBar с правой стороны?

1 Ответ

1 голос
/ 08 мая 2019

Я не уверен, что это лучшее решение, но на данный момент я решил это следующим образом: 

<html lang="en">
  <head>
    [see above]
    <style>
      .my-top-app-bar
       {
        position: static !important;
       }
    </style>
  </head>
  <body>
    <header class="mdc-top-app-bar my-top-app-bar">
      <div class="mdc-top-app-bar__row">
        <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
          <a id="button1" href="#" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
          <span class="mdc-top-app-bar__title">TMS Archiv</span>
        </section>
        <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
        </section>
      </div>
    </header>
    <div class="mdc-menu-surface--anchor">
      <div class="mdc-menu mdc-menu-surface" tabindex="-1">
        <ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical">
          <li class="mdc-list-item" role="menuitem"><span class="mdc-list-item__text">Homepage</span></li>
          <li class="mdc-list-item" role="menuitem"><span class="mdc-list-item__text">Imprint</span></li>
          <li class="mdc-list-item" role="menuitem"><span class="mdc-list-item__text">Data privacy statement</span></li>
        </ul>
      </div>
    </div>
  </body>
</html>

Важными являются следующие вещи:

  • .my-top-app-bar {position: static! Важный;}, чтобы сделать mdc-top-app-bar частью страницы, которая не пролетает над всеми другими элементами.
  • Дополнительный div под заголовком, который станет якорем для меню прямо под верхней панелью приложений
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...