Material Design 中重要元素的位置和层级关系说明

Material Design 是一种设计语言,它起源于 Google,用于设计应用程序和网站的视觉体验。Material Design 带来了很多新的元素和设计概念,比如阴影效果、卡片式界面、浮动操作按钮等。在使用 Material Design 的过程中,了解重要元素的位置和层级关系是非常重要的,它可以帮助你更好地设计你的应用程序和网站。

1. App Bar 的位置和层级关系

App Bar 是 Material Design 中非常重要的一个组件,它通常包含了应用程序的标题、导航按钮和其他重要的操作。在 Material Design 中,App Bar 通常位于屏幕顶部,并在 Z 轴上位于其他组件的最顶部。

------- ------------------------
  ---- -----------------------------
    -------- ------------------------------- ---------------------------------------
      -- -------- --------------------- ------------------------------------------
      ----- -------------------------------------------
    ----------
  ------
---------

在上面的代码中,我们可以看到 App Bar 是一个 header 元素,并有一个类名 mdc-top-app-bar。在 App Bar 中,我们可以看到 mdc-top-app-bar__rowmdc-top-app-bar__section 元素,它们可以帮助我们更好地布局 App Bar。

2. Drawer 的位置和层级关系

Drawer 是 Material Design 中用于导航的组件,它通常由导航按钮触发。在 Material Design 中,Drawer 通常位于屏幕的左边,并在 Z 轴上位于其他组件之上。

------ -------------------
  ---- ---------------------------
    --- -------------------------------- ----------
  ------
  ---- ----------------------------
    -- --------------------- ---------
      -- --------------------- ----------------------- ---------------------------------
    ----
    -- --------------------- ---------
      -- --------------------- ----------------------- -------------------------------
    ----
  ------
--------

在上面的代码中,我们可以看到 Drawer 是一个 aside 元素,并有一个类名 mdc-drawer。在 Drawer 中,我们可以使用 mdc-drawer__headermdc-drawer__content 元素来布局 Drawer 的内容。

3. Card 的位置和层级关系

Card 是 Material Design 中用于展示内容的组件,它通常包含标题、描述、图像和其他相关内容。在 Material Design 中,卡片通常被放置在其他组件之上,但在屏幕上并不一定要占据顶部位置。

---- -----------------
  ---- ---------------------------------
    ---- ---------------------- ---------------------- ------------------------ -------------------------
    ---- --------------------------
      --- ---------------------------- ----------
      --- ------------------------------- -------------
    ------
    ---- --------------------------
      -- ----------------- ---------------- ------------------------- -------------------
      -- ----------------- ---------------- ------------------------- ---------------- ----------
    ------
  ------
------

在上面的代码中,我们可以看到卡片是一个 div 元素,并有一个类名 mdc-card。在卡片中,我们可以使用 mdc-card__primary-action 元素来布局卡片的内容。

4. Floating Action Button 的位置和层级关系

Floating Action Button 是 Material Design 中一个非常重要的组件,它通常用于触发应用程序中的最重要的操作。在 Material Design 中,Floating Action Button 通常位于屏幕底部右下角,并在 Z 轴上位于其他组件之上。

------- -------------- --------------- -----------------
  ----- --------------------------------
---------

在上面的代码中,我们可以看到 Floating Action Button 是一个 button 元素,并有一个类名 mdc-fab。我们可以使用 mdc-fab__icon 类来设置按钮中的图标。

结论

在 Material Design 中,了解重要元素的位置和层级关系是非常重要的。通过掌握这些概念,你可以更好地设计你的应用程序和网站,提高用户体验。如果你想深入了解 Material Design,可以到官方网站查看更多信息和示例代码。

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/671770d4ad1e889fe221937d