使用CDN的Material Components for the Web 模态抽屉示例

Question

使用CDN的Material Components for the Web 模态抽屉示例

javascripthtmlmaterial-designmaterial-componentsmaterial-components-web

8

使用 Material Components for Web CDN 进行前端设计的示例并不那么有用。

我发现了这个模态抽屉的演示，但似乎没有使用发布的 CSS 和 JavaScript CDNs。演示：模态抽屉演示

如何使用 Material Components 的 CDNs 实现模态抽屉？

- Abel Callejo

1

给我点踩的人，请说明下踩的理由，这样我就可以修改问题。如果你认为它太宽泛了，我会修改问题。 - Abel Callejo

1

你看过文档了吗？投反对票很可能是因为你没有付出足够的努力。 - ikkuh

2个回答

3

当前选择的答案在v10及更高版本上不起作用，是由于代码库中的变更所致。事实上，目前不存在“有效”的MDCList实现，而抽屉使用它来显示列表，当前您可以使用mdc-evolution-list（似乎在CDN上无法正常工作），或者返回旧版本并使用mdc-evolution-deprecated。因此，上述代码片段应该是：

const drawer = mdc.drawer.MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));
const topAppBar = mdc.topAppBar.MDCTopAppBar.attachTo(document.querySelector('.mdc-top-app-bar'));
topAppBar.listen('MDCTopAppBar:nav', () => {
  drawer.open = !drawer.open;
});

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Material Modal Drawer Example</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
  <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
  <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
</head>

<body>
  
  <aside class="mdc-drawer mdc-drawer--modal">
    <div class="mdc-drawer__content">
      <nav class="mdc-list">
        <a class="mdc-deprecated-list-item mdc-deprecated-list-item--activated" href="#" tabindex="0" aria-current="page">
          <i class="material-icons mdc-deprecated-list-item__graphic" aria-hidden="true">inbox</i>
          <span class="mdc-deprecated-list-item__text">Inbox</span>
        </a>
        <a class="mdc-deprecated-list-item" href="#" tabindex="0">
          <i class="material-icons mdc-deprecated-list-item__graphic" aria-hidden="true">send</i>
          <span class="mdc-deprecated-list-item__text">Outgoing</span>
        </a>
        <a class="mdc-deprecated-list-item" href="#" tabindex="0">
          <i class="material-icons mdc-deprecated-list-item__graphic" aria-hidden="true">drafts</i>
          <span class="mdc-deprecated-list-item__text">Drafts</span>
        </a>
      </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">
      <div class="mdc-top-app-bar__row">
        <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
          <button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button">menu</button>
          <span class="mdc-top-app-bar__title">Title</span>
        </section>
      </div>
    </header>
    
    <main class="mdc-top-app-bar--fixed-adjust">
        Content
    </main>
    
  </div>

</body>

</html>

如果你正在使用webpack或者自己编译SCSS，你可以使用以下方式导入新列表：

@use "@material/list/evolution-mixins"as list-evolution-mixins;
@include list-evolution-mixins.core-styles();

你可以在相关的 Github 问题上找到更多信息：https://github.com/material-components/material-components-web/issues/7013

- BrozzSama

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- benvc · Accepted Answer

如果使用unpkg捆绑包而不是通过webpack使用单独的组件，那么开始使用MDC会有一点困难。入门文档可以帮助一些，但仍然很难将文档翻译为适用于各种组件的形式。最棘手的部分是弄清楚如何实例化各个组件（因为没有一种万能方法）。以下是使用unpkg快速启动模态抽屉组件的示例。

const drawer = mdc.drawer.MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));
const topAppBar = mdc.topAppBar.MDCTopAppBar.attachTo(document.querySelector('.mdc-top-app-bar'));
topAppBar.listen('MDCTopAppBar:nav', () => {
  drawer.open = !drawer.open;
});

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Material Modal Drawer Example</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
    <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
    <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
  </head>
  <body>
    <aside class="mdc-drawer mdc-drawer--modal">
      <div class="mdc-drawer__content">
        <nav class="mdc-list">
          <a class="mdc-list-item mdc-list-item--activated" href="#" tabindex="0" aria-current="page">
            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>
            <span class="mdc-list-item__text">Inbox</span>
          </a>
          <a class="mdc-list-item" href="#" tabindex="0">
            <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="#" tabindex="0">
            <i class="material-icons mdc-list-item__graphic" aria-hidden="true">drafts</i>
            <span class="mdc-list-item__text">Drafts</span>
          </a>
        </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">
        <div class="mdc-top-app-bar__row">
          <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
            <button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button">menu</button>
            <span class="mdc-top-app-bar__title">Title</span>
          </section>
        </div>
      </header> 
      <main class="mdc-top-app-bar--fixed-adjust">Content</main>
    </div>
  </body>
</html>