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”属性更改为矩形或椭圆形。
例如:
<Button variant="contained" color="primary" shape="rectangle" />
颜色
FAB 的默认颜色是蓝色。可以通过“color”属性改变颜色。
例如,如果您想更改按钮颜色为红色:
<Button variant="contained" color="secondary" />
图标
FAB 可以包含一个图标,表示按钮的操作。
例如:
<Button variant="contained" color="primary" startIcon={<Icon />} />
动画
FAB 具有一些内置的动画效果,例如从底部弹出、浮动和水波纹效果。因此,当用户与 FAB 交互时,它会产生视觉反馈。
结论
Floating Action Button 是 Material Design 设计语言中的一个重要元素,适用于多种应用场景。在应用程序中使用 FAB 可以帮助用户更快速地完成主要操作。在本文中,我们学习了 FAB 的实现方式以及相关属性,并提供了一个待办清单应用程序示例,用于展示 FAB 在应用程序中的实际应用。
现在您可以考虑在您的应用程序中使用 FAB,并通过一些属性来自定义它的外观和操作方式。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6706a1c1d91dce0dc85fb8dc