Material Design 实现细节之 Floating Action Button-JavaScript中文网-JavaScript教程资源分享门户

在 Material Design 中，Floating Action Button（FAB）成为了一个非常重要的组件，用于在屏幕上推广重要的应用程序操作。它虽然看上去很简单，但是要实现一个好看效果又不会影响用户体验则需要理解Material Design 实现细节之 Floating Action Button。

FAB 的基本结构

FAB 是 Material Design 的核心组件之一，它是一个圆形的浮动按钮，通过点击它来打开菜单或执行某些操作。在代码实现上，FAB 通常由一个按钮和一些阴影效果组成，还可以添加不同的背景色和图标。

基本的 FAB 代码结构如下：

<button class="fab">
  <i class="material-icons">add</i>
</button>

在上面的代码中，我们定义了一个圆形按钮，使用了 Google 提供的 Material Icons 图标库，添加了类名 .fab 用于设置样式。

FAB 的样式设置

为了让 FAB 显示效果更加美观，并且符合 Material Design 的规范，我们还需要通过样式来设置它的阴影效果、背景色和圆角半径等。

以下是一个基本的 FAB 样式设置：

// www.javascriptcn.com code example
.fab {
  position: fixed;
  bottom: 24px; right:24px;
  width: 56px; height: 56px;
  border-radius: 28px;
  background-color: #FF4081;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  color: #fff;
  font-size: 24px;
}

上述代码中，我们设置了 FAB 的样式，其中：

position: fixed 表示该元素是一个固定位置的浮动元素
bottom 和 right 分别表示该元素距离底部和右侧的距离
border-radius 实现了 FAB 圆形的效果
background-color 设置 FAB 的主要背景颜色
box-shadow 给 FAB 添加了一个阴影效果
color 设置图标的颜色
font-size 设置图标的大小

FAB 的交互效果

通常情况下，FAB 是通过点击它来实现某些操作。在实现点击操作时，我们可以实现一些交互效果，例如聚焦、悬停和离开等。在 Material Design 中，这种效果通常通过添加一个半透明的遮罩层实现。

以下是 FAB 的交互效果代码：

// www.javascriptcn.com code example
.fab:focus, .fab:hover {
  background-color: darken(#FF4081, 10%);
}

.fab:active:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.5);
  transform: translateX(-50%) translateY(-50%);
  animation: ripple 0.3s ease-out;
}

@keyframes ripple {
  to { transform: scale(2); opacity: 0 }
}

在上述代码中，我们添加了三种交互效果：

:focus 和 :hover 表示聚焦和悬停状态的 FAB 效果
:active:after 表示用户激活 FAB 时的效果，添加了一个圆形遮罩层，使用 CSS 动画实现纹波效果

FAB 的菜单效果

在 Material Design 中，FAB 通常与菜单结构一起使用，通过菜单让用户直接执行想要的操作。在实现 FAB 菜单效果时，我们需要考虑菜单的位置、方向、动效等因素。

以下是一个基本的 FAB 菜单实现代码：

<button class="fab">
  <i class="material-icons">add</i>
  <ul class="fab-menu">
    <li><a href="#"><i class="material-icons">label</i></a></li>
    <li><a href="#"><i class="material-icons">archive</i></a></li>
    <li><a href="#"><i class="material-icons">stared</i></a></li>
  </ul>
</button>

在上面的代码中，我们添加了一个 ul 元素，它包含了一组 li 子元素，每个 li 元素包含了一个带有 Material Icons 的 a 标签。

以下是 FAB 菜单的样式代码：

// www.javascriptcn.com code example
.fab {
  position: fixed;
  bottom: 24px; right: 24px;
  width: 56px; height: 56px;
  border-radius: 28px;
  background-color: #FF4081;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  color: #fff;
  font-size: 24px;
}

.fab-menu {
  position: absolute;
  bottom: 80px; right: 20px;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  transform: scale(0);
  transition: transform .15s ease-out;
}

.fab-menu li {
  margin: 10px 0;
  transform-origin: 100% 50%;
}

.fab-menu li a {
  display: block;
  width: 40px; height: 40px;
  margin: 10px;
  border-radius: 20px;
  background-color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  color: #757575;
  font-size: 24px;
  line-height: 40px;
  text-align: center;
}

.fab-menu.active {
  transform: scale(1);
}

在上述代码中，我们设置了 FAB 菜单的样式，其中：

.fab-menu 表示菜单的样式设置
position: absolute 表示菜单的定位
display: flex 表示使用 Flex 布局
transform: scale(0) 设置菜单默认的缩放比例为 0
transition: transform .15s ease-out 表示菜单缩放效果的动画效果

当我们要实现 FAB 菜单的弹出效果时，可以通过添加 .active 类来实现动态菜单效果。以下是 JavaScript 代码实现：

var fab = document.querySelector('.fab');
var fabMenu = document.querySelector('.fab-menu');

fab.addEventListener('click', function() {
  fabMenu.classList.toggle('active');
});

在上述代码中，我们使用了 JavaScript 的 addEventListener 监听事件，并通过 classList.toggle 来动态添加或删除 .active 类，实现 FAB 菜单的动态效果。

小结

在本文中，我们介绍了 FAB 的基本结构和样式设置，并实现了交互效果和菜单效果。这些实现细节对于开发人员来说都是非常重要的，可以在保持用户体验的同时，提升应用程序的外观。

使用 Material Design 实现细节之 Floating Action Button 是一个非常必要的技能，它不仅可以让开发人员实现更加美观的应用程序界面，还可以提高用户体验，是前端开发人员必不可少的技能之一。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d6a874a941bf7134c71de4

Material Design 实现细节之 Floating Action Button

FAB 的基本结构

FAB 的样式设置

FAB 的交互效果

FAB 的菜单效果

小结

接着读