个人中心
gpt4 book ai didi

javascript - 网页的 Material 设计。如何设置 mdc.menu 的位置？

转载 作者：行者123 更新时间：2023-12-01 15:46:29 26 4
gpt4 key购买 nike

网页的 Material 设计。如何设置 mdc.menu 的位置？

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

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

请看一下我的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>

enter image description here

最佳答案

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

例子:
yourElement.setAbsoltuePosition(100,100)
这将设置 yourElement 的位置距离顶部 100 像素，距离左侧 100 像素。

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

关于javascript - 网页的 Material 设计。如何设置 mdc.menu 的位置？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56618066/

26 4 0
文章推荐： java - 构建 IndexColorModel
文章推荐： java - 在java正则表达式中转义特殊字符(不引用)
文章推荐： java - RMySQL 包无法通过 JRI 接口(interface)加载
文章推荐： Android SDK 说我没有 JDK，不是吗？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com