@material/button 是一个基于 Material Design 按钮的 npm 包，它提供了许多按钮的样式和交互效果，可以轻松地在项目中使用。本篇文章将介绍如何使用它。
安装以及引用
使用 npm 包管理器进行安装：
npm install @material/button
在你的项目中引用：
import '@material/button/dist/mdc.button.min.css';
import { MDCButton } from '@material/button';基本用法
有两种方式可以使用 @material/button：HTML 以及 JavaScript。
HTML
在 HTML 文件中添加以下代码：
<button class="mdc-button">Button Text</button>
这将会生成一个样式类名为 mdc-button 的按钮。
JavaScript
使用 JavaScript 手动创建一个按钮，并将其附加到 DOM 中。以下代码展示了如何手动创建一个按钮：
const buttonEl = document.createElement('button');
buttonEl.classList.add('mdc-button');
buttonEl.textContent = 'Button Text';
document.body.appendChild(buttonEl);
const button = new MDCButton(buttonEl);高级用法
颜色
@material/button 支持多种颜色。以下代码展示如何设置颜色：
<button class="mdc-button mdc-button--raised mdc-button--primary">Primary Button</button> <button class="mdc-button mdc-button--raised mdc-button--secondary">Secondary Button</button>
注意，在这里，我们使用了一些额外的类名，这些类名将设置按钮的特殊样式，以匹配不同的 Material Design 风格。
按下效果
@material/button 还支持点击时的水波纹效果。以下代码展示如何启用该效果：
import { MDCRipple } from '@material/ripple';
const buttonRipple = new MDCRipple(document.querySelector('.mdc-button'));注意，我们也必须要引入 @material/ripple，并使用 MDCRipple 对象来创建一个水波纹效果对象。
示例代码
HTML
-- -------------------- ---- -------
------
------
----- ---------------- ---------------------------------------------------------------
----- ---------------- -----------------------------------------------------------------------------------
----- ---------------- ------------------------------------------------
-------
------
------- ------------------------- -------------
------- --------------
------ - --------- - ---- -------------------
----- ------ - --- -------------------------------------------------
---------
-------
-------JavaScript
-- -------------------- ---- ------- ------ ------------------------------------------- ------ - --------- - ---- ------------------- ----- -------- - --------------------------------- ------------------------------------- -------------------- - ------- ------ ------------------------------------ ----- ------ - --- --------------------
结论
@material/button 是一个非常有用的 npm 包，使我们能够轻松地创建符合 Material Design 风格的按钮。使用本文所述的方法，你可以在你的项目中轻松使用该包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/111873