Question

使用Web的材料组件CDNs进行前端设计的示例并没有帮助。

我找到了这个模式抽屉的演示，但是它似乎没有使用已发布的CSS和JavaScript CDN。演示：Modal drawer demo

如何使用Material Components的CDN来实现模式抽屉？

Answer 1

使用unpkg捆绑包而不是通过Webpack消耗单个组件来使用MDC有点困难。 Getting Started documentation有所帮助，但仍然难以翻译文档以用于各种组件。最棘手的部分是弄清楚如何实例化各种组件（因为没有一种适合所有情况的方法）。这是modal drawer component使用unpkg助您一臂之力的简单示例。

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;
});

<!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 rel="stylesheet" href="https://unpkg.com/material-components-web/dist/material-components-web.min.css">
</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="#" aria-selected="true">
          <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="#">
          <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>
      </nav>
    </div>
  </aside>

  <div class="mdc-drawer-scrim"></div>
  
  <div class="mdc-drawer-app-content">
    
    <header class="mdc-top-app-bar 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>
      </div>
    </header>
    
    <main class="main-content" id="main-content">
      <div class="mdc-top-app-bar--fixed-adjust">
        App Content
      </div>
    </main>
    
  </div>

  <script src="https://unpkg.com/material-components-web/dist/material-components-web.min.js"></script>

</body>

</html>

Answer 2

由于代码库的变化，当前选择的答案不适用于 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

上找到更多信息

使用CDN的Web模式抽屉示例的材料组件

2 个答案: