在 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 样式设置：
-- -------------------- ---- ------- ---- - --------- ------ ------- ----- ----------- ------ ----- ------- ----- -------------- ----- ----------------- -------- ----------- - --- --- ----------------- ------ ----- ---------- ----- -展开代码
上述代码中，我们设置了 FAB 的样式，其中：
position: fixed表示该元素是一个固定位置的浮动元素bottom和right分别表示该元素距离底部和右侧的距离border-radius实现了 FAB 圆形的效果background-color设置 FAB 的主要背景颜色box-shadow给 FAB 添加了一个阴影效果color设置图标的颜色font-size设置图标的大小
FAB 的交互效果
通常情况下，FAB 是通过点击它来实现某些操作。在实现点击操作时，我们可以实现一些交互效果，例如聚焦、悬停和离开等。在 Material Design 中，这种效果通常通过添加一个半透明的遮罩层实现。
以下是 FAB 的交互效果代码：
-- -------------------- ---- ------- ----------- ---------- - ----------------- --------------- ----- - ----------------- - -------- --- -------- ------ --------- --------- ---- ---- ----- ---- ------ -- ------- -- -------------- ---- ----------------- ---------------------- ---------- ---------------- ----------------- ---------- ------ ---- --------- - ---------- ------ - -- - ---------- --------- -------- - - -展开代码
在上述代码中，我们添加了三种交互效果：
: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 菜单的样式代码：
-- -------------------- ---- ------- ---- - --------- ------ ------- ----- ------ ----- ------ ----- ------- ----- -------------- ----- ----------------- -------- ----------- - --- --- ----------------- ------ ----- ---------- ----- - --------- - --------- --------- ------- ----- ------ ----- -------- ----- --------------- ------- ------- -- -------- -- ----------- ----- ---------- --------- ----------- --------- ---- --------- - --------- -- - ------- ---- -- ----------------- ---- ---- - --------- -- - - -------- ------ ------ ----- ------- ----- ------- ----- -------------- ----- ----------------- ----- ----------- - --- --- ----------------- ------ -------- ---------- ----- ------------ ----- ----------- ------- - ---------------- - ---------- --------- -展开代码
在上述代码中，我们设置了 FAB 菜单的样式，其中：
.fab-menu表示菜单的样式设置position: absolute表示菜单的定位display: flex表示使用 Flex 布局transform: scale(0)设置菜单默认的缩放比例为 0transition: 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
