随着移动设备的普及，前端开发也越来越注重用户体验。Material Design 是 Google 所推崇的一种设计风格，它提供了一种具有可访问性和可扩展性的设计框架，能够帮助开发人员创建具有现代感和美观感的应用程序。其中，顶部 App Bar 和协调布局效果是 Material Design 的重要组成部分。
什么是顶部 App Bar？
顶部 App Bar 是 Material Design 提供的一种设计模式。它是一个固定在屏幕顶部的导航栏，可以显示应用的标题、操作按钮等信息，提供了良好的用户体验。同时，顶部 App Bar 还提供了许多交互和自定义选项，能够满足不同的应用程序需求。
如何使用顶部 App Bar？
在使用顶部 App Bar 时，需要进行以下步骤：
- 添加依赖库
在 HTML 页面中添加必要的 CSS 和 JavaScript 依赖库，包括 material.min.css、material.min.js 和 material-icons.css。
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/material-design-lite@1.3.0/dist/material.min.css"> <script src="https://cdn.jsdelivr.net/npm/material-design-lite@1.3.0/dist/material.min.js"></script>
- 创建 HTML 结构
使用 <header> 元素来创建 App Bar。其中，mdl-layout__header-row 类表示 App Bar 的一行，可以在其中添加标题和操作按钮等元素。
-- -------------------- ---- -------
------- ---------------------------
---- -------------------------------
----- -------------------------------------
---- --------------------------------
---- -----------------------
-- ---------------------------- ------------ -----
-- ---------------------------- ------------ -----
-- ---------------------------- ------------ -----
------
------
---------- 初始化组件
使用 JavaScript 代码来初始化组件，使得 App Bar 的样式和交互生效。
<script>
// 初始化组件
window.onload = function() {
componentHandler.upgradeAllRegistered();
};
</script>- 定制样式
可以使用 CSS 样式来自定义 App Bar 的外观和交互。例如，可以修改 mdl-layout__header 类的背景色和文字颜色等属性。
.mdl-layout__header {
background-color: #3F51B5;
color: #FFF;
}什么是协调布局效果？
协调布局效果是指 Material Design 中的一种交互效果。它能够使得应用程序中的不同元素之间具有更好的协调性和连贯性，从而提高用户体验。
协调布局效果常常与顶部 App Bar 一起使用，可以使得应用程序的交互更加自然。例如，当用户向上滚动界面时，App Bar 会自动隐藏，而当用户向下滚动时，App Bar 又会自动显示。
如何使用协调布局效果？
在使用协调布局效果时，需要进行以下步骤：
- 添加依赖库
在 HTML 页面中添加必要的 CSS 和 JavaScript 依赖库，包括 material.min.css、material.min.js 和 material-icons.css。
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/material-design-lite@1.3.0/dist/material.min.css"> <script src="https://cdn.jsdelivr.net/npm/material-design-lite@1.3.0/dist/material.min.js"></script>
- 创建 HTML 结构
使用 <div> 元素来创建协调布局。其中，mdl-layout 类表示整个页面的布局，而 mdl-layout__content 类表示页面的内容区域。内容区域可以包含一个或多个 <section> 元素，每个元素代表一个页面模块。
-- -------------------- ---- -------
---- ----------------- ------------- --------------------------
------- ---------------------------
---- -------------------------------
----- -------------------------------------
---- --------------------------------
---- -----------------------
-- ---------------------------- ------------- -----
-- ---------------------------- ------------- -----
-- ---------------------------- ------------- -----
------
------
---------
---- ---------------------------
----- -------------------------------------
---- -----------------------
-- ---------------------------- ------------- -----
-- ---------------------------- ------------- -----
-- ---------------------------- ------------- -----
------
------
----- ----------------------------
-------- ---------------------------- ---------- --------------
---- ------------------------- ---- ------- ---- ---- ---------
----------
-------- ----------------------------- --------------
---- ------------------------- ---- ------- ---- ---- ---------
----------
-------- ----------------------------- --------------
---- ------------------------- ---- ------- ---- ---- ---------
----------
-------
------- 初始化组件
使用 JavaScript 代码来初始化组件，使得协调布局效果生效。
-- -------------------- ---- -------
--------
-- -----
------------- - ---------- -
----------------------------------------
--
-- ------
--------------------------------- ---------- -
--- --------- - ------------------ -- -----------------------------------
-------- - ----
-------- - ----------------------------------------------
-- ---------- - --------- -
-----------------------------------------------------
- ---- -
--------------------------------------------------------
-
---
---------- 定制样式
可以使用 CSS 样式来自定义协调布局效果的外观和交互。例如，可以修改 mdl-layout__header--shrink 类的高度和透明度等属性。
.mdl-layout__header--shrink {
height: 56px;
background-color: #3F51B5;
opacity: 0.8;
}示例代码
下面是一个完整的示例代码，包括顶部 App Bar 和协调布局效果。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----- --------------- ---------------------------- ---------------- ------------------
--------------- ------ -----------
----- ---------------- ---------------------------------------------------------------
----- ---------------- -------------------------------------------------------------------------------------
------- --------------------------------------------------------------------------------------------
-------
-------------------- -
------------ -----
-
------------------- -
----------------- --------
------ -----
-
--------------------------- -
------- -----
----------------- --------
-------- ----
-
--------
-------
------
---- ----------------- ------------- --------------------------
------- ---------------------------
---- -------------------------------
----- -------------------------------------
---- --------------------------------
---- -----------------------
-- ---------------------------- ------------- -----
-- ---------------------------- ------------- -----
-- ---------------------------- ------------- -----
------
------
---------
---- ---------------------------
----- -------------------------------------
---- -----------------------
-- ---------------------------- ------------- -----
-- ---------------------------- ------------- -----
-- ---------------------------- ------------- -----
------
------
----- ----------------------------
-------- ---------------------------- ---------- --------------
---- ------------------------- ---- ------- ---- ---- ---------
----------
-------- ----------------------------- --------------
---- ------------------------- ---- ------- ---- ---- ---------
----------
-------- ----------------------------- --------------
---- ------------------------- ---- ------- ---- ---- ---------
----------
-------
------
--------
------------- - ---------- -
----------------------------------------
--
--------------------------------- ---------- -
--- --------- - ------------------ -- -----------------------------------
-------- - ----
-------- - ----------------------------------------------
-- ---------- - --------- -
-----------------------------------------------------
- ---- -
--------------------------------------------------------
-
---
---------
-------
-------总结
顶部 App Bar 和协调布局效果是 Material Design 中的重要组成部分。使用它们能够让我们的应用程序拥有更好的用户体验和美观感。本文介绍了这两个组件的使用方法和示例代码，希望能够对前端开发人员有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645f2e03968c7c53b01427d3