使用CDN的Web模式抽屉示例的材料组件 [英] Material Components for the web modal drawer example using CDNs
问题描述
将材料组件用于Web的示例 CDN 对于前端设计并没有帮助.
Examples on using Material Components for Web CDNs for front-end design are not that helpful.
我发现了这个模态抽屉的演示，但是它似乎没有使用已发布的CSS和JavaScript CDN. 演示:模式抽屉演示
I found this demo of a modal drawer but it doesn't seem to use the published CSS and JavaScript CDNs. Demo: Modal drawer demo
如何使用Material Components的CDN来实现模式抽屉?
How to implement a modal drawer using Material Components' CDNs?
推荐答案
使用unpkg捆绑包而不是通过Webpack消耗单个组件来使用MDC有点困难. 入门文档会有所帮助，但翻译文档以与各种组件一起使用仍然很困难.最棘手的部分是弄清楚如何实例化各种组件(因为没有一种适合所有情况的方法).这是模式抽屉组件，使用unpkg即可开始操作.
It is a bit difficult to get going with MDC using unpkg bundles instead of consuming individual components via webpack. The Getting Started documentation helps a bit but it can still be difficult to translate the docs for use with various components. Trickiest part is figuring out how to instantiate the various components (because there is not a one size fits all approach). Here is a quick example of the modal drawer component using unpkg to get you going.
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>
这篇关于使用CDN的Web模式抽屉示例的材料组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
