Matarialize中文技术社区-Materialize CSS 框架中 Buttons 的使用详解

Materialize CSS 框架中 Buttons 的使用详解

努力前行 2024-09-14 22:08:13

255 Buttons 专栏

Buttons（按钮） 是网页中最常用的交互元素之一，用于触发各种操作，如提交表单、导航到其他页面或执行 JavaScript 功能。Materialize CSS 框架提供了一系列样式化的按钮，帮助开发者创建美观且一致的按钮。

本文将详细介绍如何在 Materialize CSS 框架中使用 Buttons，包括按钮的基本样式、颜色、大小、图标等，并通过具体示例演示如何应用这些按钮样式来优化用户界面。

1. 基本按钮样式

Materialize 提供了多种基本按钮样式，可以通过 .btn 类来实现。基本按钮具有默认的样式，包括背景颜色、边框、内边距等。

示例：基本按钮

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Materialize Basic Buttons</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>

  <div class="container">
    <h4>基本按钮</h4>
    <a class="btn">基本按钮</a>
    <a class="btn-large">大按钮</a>
    <a class="btn-small">小按钮</a>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>

解释：

.btn 类用于基本按钮。
.btn-large 和 .btn-small 类分别用于大按钮和小按钮。

2. 按钮颜色

Materialize 提供了多种按钮颜色样式，通过添加颜色类（如 .btn-primary、.btn-secondary）来应用不同的背景颜色。默认情况下，按钮具有主色调，但你可以根据需要使用不同的颜色类。

示例：按钮颜色

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>按钮颜色示例</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>

  <div class="container">
    <h4>按钮颜色</h4>
    <a class="btn red">红色按钮</a>
    <a class="btn blue">蓝色按钮</a>
    <a class="btn green">绿色按钮</a>
    <a class="btn grey">灰色按钮</a>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>

解释：

使用不同的颜色类（如 .red、.blue、.green）来设置按钮的背景颜色。

3. 按钮状态

Materialize 按钮支持多种状态样式，如禁用状态和悬停状态。这些样式可以通过添加特定的类来实现。

示例：按钮状态

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>按钮状态示例</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>

  <div class="container">
    <h4>按钮状态</h4>
    <a class="btn">正常按钮</a>
    <a class="btn disabled">禁用按钮</a>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>

解释：

.disabled 类用于禁用按钮，使其不可点击。

4. 带图标的按钮

你可以在 Materialize 按钮中添加图标，增加视觉效果和交互性。图标可以通过 material-icons 类来添加。

示例：带图标的按钮

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>带图标的按钮示例</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>

  <div class="container">
    <h4>带图标的按钮</h4>
    <a class="btn"><i class="material-icons left">thumb_up</i>喜欢</a>
    <a class="btn"><i class="material-icons right">send</i>发送</a>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>

解释：

使用 <i class="material-icons left">thumb_up</i> 在按钮中添加左侧图标。
使用 <i class="material-icons right">send</i> 在按钮中添加右侧图标。

5. 轮廓按钮

轮廓按钮（Outline Button）是另一种常见的按钮样式，它只显示边框，而没有填充背景。你可以使用 .btn-outline 类来实现这一效果。

示例：轮廓按钮

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>轮廓按钮示例</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>

  <div class="container">
    <h4>轮廓按钮</h4>
    <a class="btn btn-outline">轮廓按钮</a>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>

解释：

轮廓按钮在 Materialize 默认样式中没有直接支持，你可以通过自定义 CSS 来实现。

6. 按钮组

按钮组可以将多个按钮排列在一起，用于创建按钮集合。这可以通过将按钮放置在同一个容器中来实现。

示例：按钮组

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>按钮组示例</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
</head>
<body>

  <div class="container">
    <h4>按钮组</h4>
    <div class="btn-group">
      <a class="btn">按钮 1</a>
      <a class="btn">按钮 2</a>
      <a class="btn">按钮 3</a>
    </div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>