问网站的材料设计。如何设置mdc.menu的位置？
EN

Stack Overflow用户

提问于 2019-06-16 10:41:12

回答 2查看 1.2K关注 0票数 7

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

我将把mdc-menu从左上角移到右角。上边是70px，右边是25px。

请看一下我的截图。如何更改元素样式。

请看一下我的js代码。我必须在哪里进行更改？在css中还是在javascript中？下面的更改是我在浏览器chrome上做的。

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>

javascript

mdc

mdc-components

回答 2

Stack Overflow用户

发布于 2020-01-25 16:49:55

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

示例：

yourElement.setAbsoltuePosition(100,100)

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

您可以进一步阅读有关主题Here的更多信息

票数 0

Stack Overflow用户

发布于 2020-10-20 18:56:13

尝试使用表面锚点将按钮与菜单一起包裹。您可能需要删除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>