Floating Action Button（FAB）是 Material Design 设计语言中常用的界面元素之一。它是一种用于表示主要操作的圆形按钮，常常浮在应用程序的底部或其他元素之上。
在本文中，我们将深入学习 Material Design 中的 FAB，包括它的实现、应用场景及相关属性的应用。该篇教程将帮助您在应用中更好地使用 FAB。
什么是 Floating Action Button？
FAB 是 Material Design 设计语言中的界面元素之一，可以帮助用户更快捷方便地完成主要操作。FAB 的视觉效果为圆形、浮动在底部或其他元素之上、具有明显的水波纹效果和阴影。
FAB 常用于需要用户主动交互的操作，例如添加、创建、分享和编辑等。在 Material Design 中，FAB 还常常与可交互的输入控件配合使用，例如文本框、选择列表和日期选择器等。
案例示范
为了更好地理解 FAB，接下来我们将通过一个简单的案例来演示如何使用 FAB。我们将构建一个简单的待办清单应用程序，用户可以通过 FAB 添加新的待办事项。代码使用 React 编写，可以在 CodePen 上查看。
HTML 代码如下：
--------- -----
----- ----------
------
----- --------------- --
----------- ------------
-------
------
---- ----------------
-------
-------JavaScript 代码如下：
----- - -------- - - ------
-------- ----- -
----- ------- --------- - -------------
----- ------ -------- - -------------
----- ------- - -- -- -
-- ----- --- --- -
------------------- - ---- ----
------------
-
--
------ -
-----
-------- ---------
----
----------------- -- -- -
--- ------------------------
---
-----
------ ------------ ------------- -- ------------------------ --
------- ------------------------------
------- ----------- -- ----------------------------
------
--
-
-------------------- --- ---------------------------------CSS 代码如下：
----- ---- - ------- -- -------- -- - -- - ------- - - --- -- - -- - ------- -- -------- -- -
在这个示例中，我们使用 React 构建了一个简单的待办清单应用程序。用户可以通过输入框输入待办事项，然后单击“Add”按钮将其添加到待办清单中。您可以使用“Clear”按钮来清空待办清单。
要添加 FAB 来帮助我们更轻松地添加待办事项，我们需要在应用程序中引入 Material-UI 库。代码如下：
--------- -----
----- ----------
------
----- --------------- --
----------- ------------
-----
----------------
----------------------------------------------------------------------------------
--
-------
------
---- ----------------
------- -----------------------------------------------------------------------------------------------
-------
---------------------------------------------------------------------------------------------
----------
-------
-------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------
-----------------------
----------
-------
-------JavaScript 代码如下：
----- - -------- - - ------
----- - ------- --------- - - -----------
-------- ----- -
----- ------- --------- - -------------
----- ------ -------- - -------------
----- ------- - -- -- -
-- ----- --- --- -
------------------- - ---- ----
------------
-
--
------ -
-----
-------- ---------
----
----------------- -- -- -
--- ------------------------
---
-----
----------
---------- - -----
------------
------------- -- ------------------------
--
------- ------------------- --------------- ------------------
---
---------
------- ------------------- ----------------- ----------- -- --------------
-----
---------
------- ------------------- --------------- ----------------- -------- --------- -------- ------- --- ------ -- ---
-
---------
------
--
-
-------------------- --- ---------------------------------CSS 代码如下：
----- ---- - ------- -- -------- -- - -- - ------- - - --- -- - -- - ------- -- -------- -- -
对于 FAB 的实现，我们在最下面添加了一个按钮。它具有额外的“position”属性，该属性使按钮浮动在应用程序的底部右侧。
现在，您可以在页面上看到一个增加了 FAB 的新增待办事项应用程序。
FAB 的应用场景
在 Material Design 中，FAB 支持多种应用场景。以下是一些常见的使用情况：
- 添加操作：FAB 是添加操作的常用元素，它可以帮助快速添加新的内容。
- 创建操作：如果您的应用程序需要用户创建新的内容，则可以使用 FAB 来显示创建操作的入口点。
- 主要操作：如果您需要向用户显示特定操作的入口点，则可以使用 FAB。通常情况下，主要操作是与应用程序的核心功能相关的内容。
- 分享操作：如果您的应用程序支持分享功能，则可以使用 FAB 作为分享操作的入口点。
FAB 的相关属性
现在您已经了解了 FAB 的实现方式和应用场景，请继续查看一些与 FAB 相关的属性。
形状
FAB 的默认形状为圆形。可以通过“shape”属性更改为矩形或椭圆形。
例如：
------- ------------------- --------------- ----------------- --
颜色
FAB 的默认颜色是蓝色。可以通过“color”属性改变颜色。
例如，如果您想更改按钮颜色为红色：
------- ------------------- ----------------- --
图标
FAB 可以包含一个图标，表示按钮的操作。
例如：
------- ------------------- --------------- ---------------- --- --
动画
FAB 具有一些内置的动画效果，例如从底部弹出、浮动和水波纹效果。因此，当用户与 FAB 交互时，它会产生视觉反馈。
结论
Floating Action Button 是 Material Design 设计语言中的一个重要元素，适用于多种应用场景。在应用程序中使用 FAB 可以帮助用户更快速地完成主要操作。在本文中，我们学习了 FAB 的实现方式以及相关属性，并提供了一个待办清单应用程序示例，用于展示 FAB 在应用程序中的实际应用。
现在您可以考虑在您的应用程序中使用 FAB，并通过一些属性来自定义它的外观和操作方式。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6706a1c1d91dce0dc85fb8dc