介绍
Material Design 是一套由 Google 推出的设计语言，旨在为移动和 Web 应用程序提供一致的视觉语言。它强调基于物理现实的设计元素，如光影和运动，使应用程序看起来更加真实且易于使用。在本篇文章中，我们将展示如何使用 Material Design 中的组件和布局来创建一个漂亮和功能齐全的登录界面。
准备工作
在开始之前，确保您已将 Material Design 的 CSS 和 JavaScript 库添加到您的项目中。您可以从 Google 官网 下载它们。
HTML 结构
开始之前，让我们先来看看我们的登录界面需要哪些 HTML 元素。
-- -------------------- ---- -------
------
---- ------------------------
------------
------
---- ---------------------- ----------------------------------
------ ----------- ------------- ------------------------------
------ ----------------------------- --------------------------
---- ------------------------------------------
------
---- ---------------------- ----------------------------------
------ --------------- ------------- ------------------------------
------ ----------------------------- -------------------------
---- ------------------------------------------
------
------- ----------------- -------------------------------
-------
------
-------在上面的 HTML 中，我们创建了一个包含登录表单的容器 login-container。表单中包含了两个输入框 (用户名和密码) 和一个登录按钮。
样式
接下来，我们将为表单添加 Material Design 样式。样式可以根据您的需要进行修改。
-- -------------------- ---- ------- ---------------- - -------- ----- --------------- ------- ------------ ------- ---------------- ------- ------- ------ - --------------- - -------------- ----- ------ ------ - ----------- - ------ ----- -
上面的 CSS 样式将为表单提供居中对齐的容器和宽度。输入框和按钮的样式也被修改为适应 Material Design 样式。
JavaScript
为了使表单正确地使用 Material Design 样式，我们需要在浏览器中引用 Material Design 库，然后将 mdc-auto-init 属性添加到 HTML 标记中。
-- -------------------- ---- -------
------- ---------------------------------------------------------------------------
------- -------------------------------------------------------------------------------------
------- -------------------------------------------------------------------------------
------
---- ------------------------
------------
------
---- ---------------------- ----------------------------------
------ ----------- ------------- ------------------------------
------ ----------------------------- --------------------------
---- ------------------------------------------
------
---- ---------------------- ----------------------------------
------ --------------- ------------- ------------------------------
------ ----------------------------- -------------------------
---- ------------------------------------------
------
------- ----------------- -------------------------------
-------
------
--------
---------------
---------
-------上面的 JavaScript 将为我们的表单初始化 Material Design 组件。现在我们已完成了我们的登录界面！
结论
在本文中，我们讲解了如何使用 Material Design 样式和组件创建一个漂亮的登录界面。这些组件和布局可以帮助您创建易于使用的 Web 应用程序并提高用户体验。在设计您的下一个应用程序时，考虑加入 Material Design 的元素，以便您的应用程序看起来更加现代和专业。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6719d4a99b4aadf9e005cdd3