Question

网络的材料设计。如何设置mdc.menu的位置？

我将把mdc菜单从左上角移到右角。顶部70像素，右侧25像素。

请看看我的照片。如何更改元素样式。

请看一下我的js代码。我必须在哪里进行更改？在CSS或JavaScript中？下面的更改是我使用浏览器镶边完成的。

element.style {
    right: 25px;
    top: 70px;
}

这是完整的html代码。

<!DOCTYPE html>
<html>
  <head>
    <title>App Bar</title>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="norobots" content="noindex, nofollow, noarchive">

    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="icon" href="favicon.ico" type="image/x-icon">

    <!-- import Material Icons from Google Fonts -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link href="https://fonts.googleapis.com/css?family=Roboto+Mono|Roboto:400i" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">

    <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
    <link rel="stylesheet" href="src/css/styles.css">
  </head>

  <body class="mdc-typography">
    <aside class="mdc-drawer mdc-drawer--modal">
      <div class="mdc-drawer__header">
        <h6 class="mdc-typography--headline6 mdc-drawer__title">Title</h6>
        <hr class="mdc-list-divider">
      </div>
      <div class="mdc-drawer__content">
        <nav class="mdc-list">
          <a class="mdc-list-item mdc-list-item--activated" href="#" aria-selected="true">
            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">email</i>
            <span class="mdc-list-item__text">Email</span>
          </a>
          <a class="mdc-list-item" href="#">
            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">send</i>
            <span class="mdc-list-item__text">Outgoing</span>
          </a>
          <a class="mdc-list-item" href="#">
            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">drafts</i>
            <span class="mdc-list-item__text">Drafts</span>
          </a>
          <hr class="mdc-list-divider">
        </nav>
      </div>
    </aside>

    <div class="mdc-drawer-scrim"></div>
    <div class="mdc-drawer-app-content">
      <header class="mdc-top-app-bar mdc-top-app-bar--fixed app-bar" id="app-bar">
        <div class="mdc-top-app-bar__row">
          <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
            <a href="#" class="demo-menu material-icons mdc-top-app-bar__navigation-icon">menu</a>
            <span class="mdc-top-app-bar__title">Title</span>
          </section>
          <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
            <a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="Download this page">file_download</a>
            <button id="menu-button" class="material-icons mdc-top-app-bar__action-item" aria-label="Personal settings" alt="Personal settings">person</button>
          </section>
        </div>
      </header>
    </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">
          <i class="material-icons mdc-list-item__graphic" aria-hidden="true">person</i>
          <span class="mdc-list-item__text">Profil</span>
        </li>
        <li class="mdc-list-item" role="menuitem">
        <i class="material-icons mdc-list-item__graphic" aria-hidden="true">settings</i>
          <span class="mdc-list-item__text">Settings</span>
        </li>
        <hr class="mdc-list-divider">
        <li class="mdc-list-item" role="menuitem">
          <i class="material-icons mdc-list-item__graphic" aria-hidden="true">exit_to_app</i>
          <span class="mdc-list-item__text">Sign out</span>
        </li>
      </ul>
    </div>

    <main>
      <h1 class="mdc-typography--headline1">title h1</h1>
      <h2 class="mdc-typography--headline2">title h2</h2>
      <h3 class="mdc-typography--headline3">title h3</h3>
      <h4 class="mdc-typography--headline4">title h4</h4>
      <h5 class="mdc-typography--headline5">title h5</h5>
      <h6 class="mdc-typography--headline6">title h6</h6>

      <p class="mdc-typography--subtitle1">subtitle 1</p>
      <p class="mdc-typography--subtitle2">subtitle 2</p>

      <p class="mdc-typography--body1">body 1</p>
      <p class="mdc-typography--body2">body 2</p>

      <p class="mdc-typography--button">button</p>
      <p class="mdc-typography--caption">caption</p>
      <p class="mdc-typography--overline">overline</p>
    </main>

    <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
    <script>
      const drawer = mdc.drawer.MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));
      const topAppBar = mdc.topAppBar.MDCTopAppBar.attachTo(document.querySelector('#app-bar'));
      topAppBar.listen('MDCTopAppBar:nav', () => {
        drawer.open = !drawer.open;
      });

      const menu = mdc.menu.MDCMenu.attachTo(document.querySelector('.mdc-menu'));
        menu.setAnchorCorner(mdc.menu.Corner.BOTTOM_LEFT);
        menu.open = false;
        menu.setFixedPosition(true);

      const btn = document.querySelector('#menu-button');
      btn.addEventListener('click', () => {
        menu.open = !menu.open;
      });
    </script>
  </body>
</html>

Answer 1

您可以使用具有两个参数的属性方法mdc-menu来设置setAbsolutePosition()组件的位置；第一个：是从顶部开始的位置，是整数，第二个是水平位置，是n个整数。

示例：

yourElement.setAbsoltuePosition(100,100)

这将设置yourElement从顶部开始100px，从左侧开始100px的位置。

您可以进一步了解有关Here的主题

Answer 2

尝试使用表面锚点将按钮和菜单一起包装。您可能需要删除setAbsolutePosition方法，因为这可能会覆盖此功能。

这将自动将菜单锚定到包装的元素（例如您的按钮）上。

Material Design Menus

<div class="mdc-menu-surface--anchor">
   <button id="menu-button" class="material-icons mdc-top-app-bar__action-item" aria-label="Personal settings" alt="Personal settings">person</button>
   <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">
            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">person</i>
            <span class="mdc-list-item__text">Profile</span>
         </li>
         <li class="mdc-list-item" role="menuitem">
            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">settings</i>
            <span class="mdc-list-item__text">Settings</span>
         </li>
         <hr class="mdc-list-divider">
         <li class="mdc-list-item" role="menuitem">
            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">exit_to_app</i>
            <span class="mdc-list-item__text">Sign out</span>
         </li>
      </ul>
   </div>
</div>

网络的材料设计。如何设置mdc.menu的位置？

2 个答案: