Material Design 是 Google 推出的一种全新的设计语言，旨在为用户提供一致、自然、富有层次感的视觉和交互体验。在 Material Design 中，Button 组件是最常用的界面元素之一，本文将详细介绍 Material Design 中的 Button 组件的使用方法，包括样式、属性、事件等方面的内容。
样式
Material Design 中的 Button 组件有多种样式可供选择，包括 Raised Button、Flat Button、Floating Action Button、Icon Button 等。其中，Raised Button 和 Flat Button 是最常用的两种样式。
Raised Button
Raised Button 是一种有立体感的按钮，它的主要特点是按钮底部有一层阴影，让按钮看起来像是浮起来的。Raised Button 的样式代码如下：
<button class="mdc-button mdc-button--raised"> Button </button>
在使用 Raised Button 时，我们需要为按钮添加 mdc-button 和 mdc-button--raised 两个类名。mdc-button 表示这是一个 Material Design 中的 Button 组件，而 mdc-button--raised 表示这是一个 Raised Button。
Flat Button
Flat Button 是一种扁平化的按钮，它没有阴影，看起来比较简洁。Flat Button 的样式代码如下：
<button class="mdc-button mdc-button--outlined"> Button </button>
在使用 Flat Button 时，我们需要为按钮添加 mdc-button 和 mdc-button--outlined 两个类名。mdc-button 表示这是一个 Material Design 中的 Button 组件，而 mdc-button--outlined 表示这是一个 Flat Button。
属性
Material Design 中的 Button 组件有多个属性可供设置，包括按钮的类型、颜色、大小等。
类型
Material Design 中的 Button 组件有多种类型可供选择，包括 Primary、Secondary、Success、Warning、Danger 等。我们可以通过为按钮添加相应的类名来设置按钮的类型。例如，设置一个 Primary 类型的 Raised Button：
<button class="mdc-button mdc-button--raised mdc-button--primary"> Button </button>
在上面的代码中，我们为按钮添加了 mdc-button--primary 类名，表示这是一个 Primary 类型的按钮。其他类型的按钮类名分别为 mdc-button--secondary、mdc-button--success、mdc-button--warning、mdc-button--danger。
颜色
Material Design 中的 Button 组件有多种颜色可供选择，我们可以通过为按钮添加相应的类名来设置按钮的颜色。例如，设置一个蓝色的 Raised Button：
<button class="mdc-button mdc-button--raised mdc-button--primary mdc-theme--primary-bg"> Button </button>
在上面的代码中，我们为按钮添加了 mdc-theme--primary-bg 类名，表示这是一个蓝色的按钮。其他颜色的类名分别为 mdc-theme--secondary-bg、mdc-theme--success-bg、mdc-theme--warning-bg、mdc-theme--danger-bg。
大小
Material Design 中的 Button 组件有多种大小可供选择，我们可以通过为按钮添加相应的类名来设置按钮的大小。例如，设置一个大号的 Raised Button：
<button class="mdc-button mdc-button--raised mdc-button--dense"> Button </button>
在上面的代码中，我们为按钮添加了 mdc-button--dense 类名，表示这是一个大号的按钮。其他大小的类名分别为 mdc-button--compact。
事件
Material Design 中的 Button 组件支持多种事件，包括 Click、Hover、Focus、Blur 等。我们可以通过 JavaScript 代码来处理这些事件。例如，当用户点击一个按钮时，我们可以弹出一个提示框：
<button class="mdc-button mdc-button--raised" onclick="alert('Hello, world!')">
Button
</button>在上面的代码中，我们在按钮上添加了 onclick 属性，并将其设置为一个 JavaScript 函数，当用户点击按钮时，就会执行这个函数，弹出一个提示框。
示例代码
下面是一个完整的 Material Design Button 组件的示例代码：
// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Material Design Button</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@material/button@6.0.0/dist/mdc.button.min.css">
<style>
body {
padding: 20px;
}
</style>
</head>
<body>
<button class="mdc-button mdc-button--raised mdc-button--primary mdc-theme--primary-bg mdc-button--dense" onclick="alert('Hello, world!')">
Button
</button>
<button class="mdc-button mdc-button--outlined mdc-button--secondary mdc-theme--secondary-bg mdc-button--compact" onclick="alert('Hello, world!')">
Button
</button>
</body>
</html>在上面的代码中，我们首先引入了 Material Design Button 组件的样式文件和 Google Fonts 字体文件。然后，我们分别创建了一个 Primary 类型的 Raised Button 和一个 Secondary 类型的 Flat Button，并分别设置了它们的颜色和大小。最后，我们为按钮添加了一个点击事件，当用户点击按钮时，会弹出一个提示框。
结语
Material Design 中的 Button 组件是前端开发中最常用的界面元素之一，本文详细介绍了它的样式、属性、事件等方面的内容，希望能对大家在实际开发中有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d8e9f8a941bf7134047b09