Matarialize中文技术社区-Materialize专栏-Materialize CSS 框架中 Floating Action Button 的使用详解

Materialize CSS 框架中 Floating Action Button 的使用详解

Floating Action Button,FAB

Floating Action Button（FAB，浮动操作按钮） 是一种用于执行主要操作的 UI 组件，它通常悬浮在屏幕的角落，并且具有醒目的样式和动画效果。Materialize CSS 框架中的 Floating Action Button 组件设计现代且易于使用，可以提高应用程序的用户体验。

本文将详细介绍如何在 Materialize CSS 框架中使用 Floating Action Button，包括基本用法、配置选项以及实际应用示例。

1. 基本 FAB 使用

Materialize 的 Floating Action Button 可以通过 .fixed-action-btn 类来定义。你可以使用 .btn-floating 类来创建 FAB，并通过 .large 或 .small 类来设置按钮的大小。

示例：基本 FAB

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Materialize FAB 示例</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
  <style>
    /* 自定义 FAB 样式 */
    .fixed-action-btn {
      bottom: 45px;
      right: 24px;
    }
  </style>
</head>
<body>

  <div class="container">
    <h4>基本 FAB 示例</h4>
    <p>这是一个浮动操作按钮的基本示例。</p>
  </div>

  <!-- Floating Action Button -->
  <div class="fixed-action-btn">
    <a class="btn-floating btn-large red">
      <i class="material-icons">add</i>
    </a>
  </div>

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

解释：

使用 .fixed-action-btn 类将按钮固定在页面的右下角。
.btn-floating 类定义了浮动按钮的样式。
.btn-large 类设置了按钮的大小。
.red 类设置了按钮的颜色。

2. FAB 与菜单

你可以使用 FAB 作为一个菜单触发器，当点击按钮时，弹出一个菜单。这种效果通常用于提供多个操作选项。

示例：FAB 菜单

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>FAB 菜单示例</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
  <style>
    .fixed-action-btn {
      bottom: 45px;
      right: 24px;
    }
  </style>
</head>
<body>

  <div class="container">
    <h4>FAB 菜单示例</h4>
    <p>点击浮动操作按钮，弹出菜单选项。</p>
  </div>

  <!-- Floating Action Button with menu -->
  <div class="fixed-action-btn">
    <a class="btn-floating btn-large red">
      <i class="material-icons">menu</i>
    </a>
    <ul class="dropdown-content">
      <li><a href="#!"><i class="material-icons">insert_chart</i>Chart</a></li>
      <li><a href="#!"><i class="material-icons">cloud</i>Cloud</a></li>
      <li><a href="#!"><i class="material-icons">settings</i>Settings</a></li>
    </ul>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      var elems = document.querySelectorAll('.fixed-action-btn');
      var instances = M.FloatingActionButton.init(elems, {
        direction: 'left'
      });
    });
  </script>
</body>
</html>

解释：

在 FAB 的 HTML 结构中，使用 ul 元素来定义菜单选项。
JavaScript 初始化 FAB 菜单，使其可以在点击时显示菜单项。
direction 选项可以设置 FAB 的展开方向。

3. FAB 动画效果

FAB 在点击时可以设置动画效果，比如展现多个操作按钮或进行一些视觉上的变化。

示例：带有动画的 FAB

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>带有动画的 FAB 示例</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
  <style>
    .fixed-action-btn {
      bottom: 45px;
      right: 24px;
    }
  </style>
</head>
<body>

  <div class="container">
    <h4>带有动画的 FAB 示例</h4>
    <p>点击 FAB 以查看动画效果。</p>
  </div>

  <!-- Floating Action Button with animation -->
  <div class="fixed-action-btn" data-smooth-scroll="true">
    <a class="btn-floating btn-large red">
      <i class="material-icons">add</i>
    </a>
    <ul class="collection">
      <li class="collection-item"><a href="#!">Option 1</a></li>
      <li class="collection-item"><a href="#!">Option 2</a></li>
      <li class="collection-item"><a href="#!">Option 3</a></li>
    </ul>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      var elems = document.querySelectorAll('.fixed-action-btn');
      var instances = M.FloatingActionButton.init(elems, {
        direction: 'top',
        hoverEnabled: true
      });
    });
  </script>
</body>
</html>

解释：

direction 选项设置 FAB 的展开方向。
hoverEnabled 选项控制是否在悬停时显示菜单项。

4. 使用 FAB 和其他 Materialize 组件结合

FAB 可以与其他 Materialize 组件结合使用，例如卡片、表单或对话框，以提供更多的交互功能。

示例：与卡片结合使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>FAB 与卡片结合使用示例</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
  <style>
    .fixed-action-btn {
      bottom: 45px;
      right: 24px;
    }
  </style>
</head>
<body>

  <div class="container">
    <h4>FAB 与卡片结合使用</h4>
    <div class="card">
      <div class="card-content">
        <span class="card-title">卡片标题</span>
        <p>这是卡片的内容区域。</p>
      </div>
      <div class="card-action">
        <a href="#">操作 1</a>
        <a href="#">操作 2</a>
      </div>
    </div>
  </div>

  <!-- Floating Action Button -->
  <div class="fixed-action-btn">
    <a class="btn-floating btn-large red">
      <i class="material-icons">add</i>
    </a>
  </div>

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

解释：

将 FAB 放置在页面的卡片上方，以提供快速操作入口。
FAB 可以用于触发卡片相关的操作或功能。

5. 自定义 FAB 样式

你可以通过 CSS 自定义 FAB 的外观和位置，以符合你的设计需求。

示例：自定义 FAB 样式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>自定义 FAB 样式示例</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
  <style>
    .fixed-action-btn {
      bottom: 60px;
      right: 30px;
    }
    .btn-floating.custom-color {
      background-color: #ff5722; /* 自定义颜色 */
    }
    .btn-floating.custom-size {
      width: 60px;
   

 height: 60px;
      line-height: 60px;
    }
    .btn-floating.custom-size i {
      font-size: 30px;
    }
  </style>
</head>
<body>

  <div class="container">
    <h4>自定义 FAB 样式</h4>
    <p>这个浮动操作按钮具有自定义样式。</p>
  </div>

  <!-- Customized Floating Action Button -->
  <div class="fixed-action-btn">
    <a class="btn-floating btn-large custom-color custom-size">
      <i class="material-icons">star</i>
    </a>
  </div>

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

解释：

使用 CSS 自定义按钮的颜色、大小和图标的样式。
.custom-color 和 .custom-size 类实现自定义的外观设置。

结论

Materialize CSS 框架中的 Floating Action Button 组件是一个强大而灵活的工具，用于提供用户快速访问主要操作的方式。通过基本使用、菜单功能、动画效果、自定义样式以及与其他组件的结合，你可以根据需求创建具有吸引力和实用性的浮动操作按钮。这使得 FAB 成为提升用户体验和界面交互的重要元素。

评论区

评论列表

{{ rItem.user.nickname || rItem.user.username }} @ {{ rItem.toUser.nickname || rItem.toUser.username }}