Material Design 中 FAB 的使用技巧-JavaScript中文网-JavaScript教程资源分享门户

在 Material Design 中，FAB (Floating Action Button) 是一个非常重要和流行的组件。它的主要作用是在界面中放置一个浮动的圆形按钮，用户可以通过点击它来执行一些主要的动作，如创建、添加、分享等等。

在本文中，我们将介绍 Material Design 中 FAB 的使用技巧，包括布局、样式、动画等等，希望能够对前端开发者有所帮助。

布局

在布局方面，FAB 主要有两种放置方式，即浮动在页面右下角和嵌入在其他容器内。这两种方式各有利弊，根据实际情况选择。

浮动在页面右下角

浮动在页面右下角是 FAB 最常见的放置方式，它可以直接放在页面的最上层，让用户一眼就能看到。

<div class="fab-container">
  <button class="fab">+</button>
</div>

// javascriptcn.com 代码示例
.fab-container {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 100;
}

.fab {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: #F44336;
  color: #FFF;
  font-size: 24px;
  line-height: 56px;
  text-align: center;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.26);
}

需要注意的是，FAB 的容器要设置为 position: fixed，这样它才能够浮动在页面上，同时设置 z-index 可以让它覆盖其他的元素。

嵌入在其他容器内

如果页面布局比较复杂，或者需要多个 FAB 联合使用，那么可以将 FAB 嵌入在其他容器中，这样可以更好地控制 FAB 的位置和样式。

<div class="fab-container">
  <div class="fab-group">
    <button class="fab">+</button>
    <button class="fab">A</button>
    <button class="fab">B</button>
  </div>
</div>

// javascriptcn.com 代码示例
.fab-container {
  position: relative;
}

.fab-group {
  position: absolute;
  bottom: 0;
  right: 0;
}

.fab-group .fab {
  transform: translate(0, 0);
  margin-bottom: 16px;
}

.fab-group .fab:nth-child(2) {
  transform: translate(-56px, -56px);
}

.fab-group .fab:nth-child(3) {
  transform: translate(-56px, -112px);
}

.fab {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: #F44336;
  color: #FFF;
  font-size: 24px;
  line-height: 56px;
  text-align: center;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.26);
}

这里我们创建了一个 FAB 组，将三个不同的 FAB 放在了一起，使用了 transform: translate 属性来将它们定位到不同的位置。

样式

在样式方面，FAB 可以自定义各种属性来满足不同的需求。

颜色

FAB 的背景色可以根据实际需要进行自定义。常见的配色方案有两种：一个是使用 Material Design 的颜色规范，另一个是使用自定义的颜色。

/* 使用 Material Design 的颜色规范 */
background-color: #F44336;

/* 使用自定义的颜色 */
background-color: #33B5E5;

除了背景色，FAB 的字体颜色也可以进行自定义。

color: #FFF;

图标

FAB 可以添加任何带有透明背景的图标。通过使用字体图标和伪元素，可以在 FAB 上很容易地添加图标。

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

// javascriptcn.com 代码示例
.fab:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 56px;
  height: 56px;
  background-image: url("path/to/icon.png");
  background-size: 24px 24px;
  background-repeat: no-repeat;
  background-position: center center;
}

.material-icons {
  font-size: 24px;
  line-height: 24px;
}

这里我们使用了 Font Awesome 字体图标，将图标作为 FAB 的伪元素添加到了 FAB 上，同时使用 background-image 属性将图标显示出来。

除了字体图标，SVG 图标也可以作为 FAB 的图标。

<button class="fab"><svg class="icon" viewBox="0 0 24 24"><path d="..."></path></svg></button>

.icon {
  width: 24px;
  height: 24px;
  fill: #FFF;
}

这里我们使用了一个 SVG 图标，并通过 CSS 修改了填充颜色。

阴影

Material Design 中的 FAB 带有一定的投影效果，这可以通过 box-shadow 属性来实现。

box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.26);

这里我们创建了一个简单的投影效果，可以根据实际需要进行调整。

动画

在动画方面，FAB 可以通过添加进入和退出的动画效果使界面更加生动。

进入动画

当 FAB 进入界面时，可以使用 transform 属性添加一个简单的动画效果，从而增强用户体验。

// javascriptcn.com 代码示例
.fab {
  ...
  transform: scale(0);
  transition: transform 0.2s ease-out;
}

.fab.show {
  transform: scale(1);
}

这里我们使用了 scale 属性来控制 FAB 的大小，设置了一个 0.2s 的过渡效果。

退出动画

当 FAB 离开界面时，也可以使用 transform 属性添加一个简单的动画效果，使界面更加自然。

.fab.hide {
  transform: scale(0);
  transition: transform 0.2s ease-out;
}

这里我们同样使用了 scale 属性来控制 FAB 的大小。

总结

在本文中，我们介绍了 Material Design 中 FAB 的使用技巧，包括布局、样式、动画等等，这些技巧可以帮助开发者更好地定制自己的 FAB，并提升用户体验。

希望这篇文章对前端开发者有所帮助，如果在实践过程中有任何疑问或建议，欢迎在评论区留言。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6540d05f7d4982a6eba60cf3