我正在使用基本的文件管理器来维护我的网页文件。如何开始使用MDC-Web Vanilla？MDC-Web：如何设置MDC-Web Vanilla
在MDC-Web Github project folder中有：README.md，index.js，material-components-web.scss和package.json。
我希望找到<link>和<script>元素添加到MDC的Web到我的项目，类似于如何MDL和Bootstrap工作。我在哪里找到那些？
所有你需要的是3件事。 CSS，JS和window.mdc.autoInit();。查看嵌入式示例。 （其实你需要添加的图标和字体的CSS链接元素也）
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/material-components-web.min.css">
<script src="https://unpkg.com/[email protected]/dist/material-components-web.min.js"></script>
window.mdc.autoInit();
var dialog = new mdc.dialog.MDCDialog(document.querySelector('#my-mdc-dialog'));
var drawer = new mdc.drawer.MDCTemporaryDrawer(document.querySelector('.mdc-temporary-drawer'));
var MDCSnackbar = mdc.snackbar.MDCSnackbar;
var snackbar = new MDCSnackbar(document.querySelector('.mdc-snackbar'));
var menu = new mdc.menu.MDCSimpleMenu(document.querySelector('.mdc-simple-menu'));
document.querySelector('#basic-menu-button').addEventListener('click',() => menu.open = !menu.open);
document.getElementById('greeting-form').addEventListener('submit', function(evt) {
evt.preventDefault();
var firstname = evt.target.elements.firstname.value;
var lastname = evt.target.elements.lastname.value;
var greeting = 'Hello';
if (firstname || lastname) {
greeting += ', ';
if (firstname && lastname) {
greeting += firstname + ' ' + lastname;
}
else if (lastname) {
greeting += 'Mx. ' + lastname;
}
else {
greeting += firstname;
}
}
greeting += '!';
document.getElementById('greeting').textContent = greeting;
});
dialog.listen('MDCDialog:accept', function() {
console.log('accepted');
});
dialog.listen('MDCDialog:cancel', function() {
console.log('canceled');
});
document.querySelector('#dialog-button').addEventListener('click', function (evt) {
dialog.lastFocusedTarget = evt.target;
dialog.show();
});
document.querySelector('#toast-button').addEventListener('click', function(evt) {
snackbar.show({message:"hello"});
});
document.querySelector('#menu-button').addEventListener('click', function(evt) {
drawer.open = true;
});<html class="mdc-typography">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>MDC Web</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/material-components-web.min.css">
</head>
<body>
<aside class="mdc-temporary-drawer mdc-typography">
<nav class="mdc-temporary-drawer__drawer">
<header class="mdc-temporary-drawer__header">
<div class="mdc-temporary-drawer__header-content">
Header here
</div>
</header>
<nav id="icon-with-text-demo" class="mdc-temporary-drawer__content mdc-list">
<a class="mdc-list-item mdc-temporary-drawer--selected" href="#">
<i class="material-icons mdc-list-item__start-detail" aria-hidden="true">inbox</i>Inbox
</a>
<a class="mdc-list-item" href="#">
<i class="material-icons mdc-list-item__start-detail" aria-hidden="true">star</i>Star
</a>
</nav>
</nav>
</aside>
<main class="mdc-layout-grid">
<!--<section class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6 mdc-layout-grid__cell--span-8-tablet"></section>-->
<!--<section class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4 mdc-layout-grid__cell--span-6-tablet"></section>-->
<!--<section class="mdc-layout-grid__cell mdc-layout-grid__cell--span-2 mdc-layout-grid__cell--span-4-phone"></section>-->
<section class="mdc-layout-grid__cell">
<h1 class="mdc-typography--display1">Tell us about yourself!</h1>
<form action="#" id="greeting-form">
<div>
<div class="mdc-form-field">
<div class="mdc-textfield" data-mdc-auto-init="MDCTextfield">
<input id="firstname" type="text" class="mdc-textfield__input">
<label for="firstname" class="mdc-textfield__label">
First Name
</label>
</div>
</div>
<div class="mdc-form-field">
<div class="mdc-textfield" data-mdc-auto-init="MDCTextfield">
<input id="lastname" type="text" class="mdc-textfield__input">
<label for="lastname" class="mdc-textfield__label">
Last Name
</label>
</div>
</div>
</div>
<button type="submit" class="mdc-button
mdc-button--raised
mdc-button--primary
mdc-ripple-surface" data-mdc-auto-init="MDCRipple">
Print Greeting
</button>
</form>
</section>
<section class="mdc-layout-grid__cell">
<button id="dialog-button" class="mdc-button
mdc-button--raised
mdc-button--primary
mdc-ripple-surface" data-mdc-auto-init="MDCRipple">
Dialog
</button>
</section>
<section class="mdc-layout-grid__cell">
<button id="toast-button" class="mdc-button
mdc-button--raised
mdc-button--primary
mdc-ripple-surface" data-mdc-auto-init="MDCRipple">
Toast
</button>
</section>
<section class="mdc-layout-grid__cell">
<button id="menu-button" class="mdc-button
mdc-button--raised
mdc-button--primary
mdc-ripple-surface" data-mdc-auto-init="MDCRipple">
Menu
</button>
</section>
<section class="mdc-layout-grid__cell">
<button id="basic-menu-button" class="mdc-button
mdc-button--raised
mdc-button--primary
mdc-ripple-surface" data-mdc-auto-init="MDCRipple">
Basic Menu
</button>
<div class="mdc-simple-menu" tabindex="-1">
<ul class="mdc-simple-menu__items mdc-list" role="menu" aria-hidden="true">
<li class="mdc-list-item" role="menuitem" tabindex="0">
A Menu Item
</li>
<li class="mdc-list-item" role="menuitem" tabindex="0">
Another Menu Item
</li>
</ul>
</div>
</section>
<section class="mdc-layout-grid__cell">
<i class="mdc-icon-toggle material-icons" role="button" aria-pressed="false"
aria-label="Add to favorites" tabindex="0"
data-toggle-on='{"label": "Remove from favorites", "content": "favorite"}'
data-toggle-off='{"label": "Add to favorites", "content": "favorite_border"}'>
favorite_border
</i>
</section>
<section class="mdc-layout-grid__cell">
<div class="mdc-select" role="listbox" tabindex="0">
<span class="mdc-select__selected-text">Pick a food group</span>
<div class="mdc-simple-menu mdc-select__menu">
<ul class="mdc-list mdc-simple-menu__items">
<li class="mdc-list-item" role="option" id="grains" aria-disabled="true">
Pick a food group
</li>
<li class="mdc-list-item" role="option" id="grains" tabindex="0">
Bread, Cereal, Rice, and Pasta
</li>
<li class="mdc-list-item" role="option" id="vegetables" tabindex="0">
Vegetables
</li>
<li class="mdc-list-item" role="option" id="fruit" tabindex="0">
Fruit
</li>
<li class="mdc-list-item" role="option" id="dairy" tabindex="0">
Milk, Yogurt, and Cheese
</li>
<li class="mdc-list-item" role="option" id="meat" tabindex="0">
Meat, Poultry, Fish, Dry Beans, Eggs, and Nuts
</li>
<li class="mdc-list-item" role="option" id="fats" tabindex="0">
Fats, Oils, and Sweets
</li>
</ul>
</div>
</div>
</section>
<!-- The p element below is where we'll eventually output our greeting -->
<p class="mdc-typography--headline" id="greeting"></p>
</main>
<aside id="my-mdc-dialog" style="visibility:hidden" class="mdc-dialog" role="alertdialog" aria-labelledby="my-mdc-dialog-label" aria-describedby="my-mdc-dialog-description">
<div class="mdc-dialog__surface">
<header class="mdc-dialog__header">
<h2 id="my-mdc-dialog-label" class="mdc-dialog__header__title">
Use Google's location service?
</h2>
</header>
<section id="my-mdc-dialog-description" class="mdc-dialog__body">
Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.
</section>
<footer class="mdc-dialog__footer">
<button type="button" class="mdc-button mdc-dialog__footer__button mdc-dialog__footer__button--cancel">Decline</button>
<button type="button" class="mdc-button mdc-dialog__footer__button mdc-dialog__footer__button--accept">Accept</button>
</footer>
</div>
<div class="mdc-dialog__backdrop"></div>
</aside>
<div class="mdc-snackbar" aria-live="assertive" aria-atomic="true" aria-hidden="true">
<div class="mdc-snackbar__text"></div>
<div class="mdc-snackbar__action-wrapper">
<button type="button" class="mdc-button mdc-snackbar__action-button"></button>
</div>
</div>
<script src="https://unpkg.com/[email protected]/dist/material-components-web.min.js"></script>
</body>
</html>
从我看到，该项目采用ES6模块，所有的浏览器尚未支持例如铬。 webpack将这些组件构建成一个包，并提供翻译选项，以支持不带ES6模块的浏览器。 –