在 Material Design 中，使用卡片（Card）可将内容封装成一种干净、整洁且具有层次感的 UI 元素。本文将介绍如何使用 Material Design 实现带有多视图的卡片效果，在单个卡片中显示多个相关视图。
卡片与多视图
卡片是 Material Design 中常用的一个元素，它可以包含各种类型的内容，如图片、文本、按钮等。而多视图则是指在同一个空间内，通过切换不同的视图呈现不同的内容，例如在商品详情页面，通过点击“产品信息”、“评价”和“问答”三个标签来更换展示的内容。
代码实现
下面我们通过一个示例演示如何使用 Material Design 实现带有多视图的卡片效果。
首先，在 HTML 文件中添加一个卡片容器 div，以及用于切换视图的标签：
-- -------------------- ---- -------
---- -------------
---- --------------
-- -------- ----------- ------------ -----
-- -------- ----------------- -----
-- -------- ----------------- -----
------
---- ----------------
---- ----------- --------
-------- ------
------- -- --- ------- --- ---- ------
------
---- -------------
-------- ------
------- -- --- ------- --- ---- ------
------
---- -------------
-------- ------
------- -- --- ------- --- ---- ------
------
------
------然后，在 CSS 文件中定义卡片容器和多视图的样式：
-- -------------------- ---- ------- ----- - ------ ------ ----------- - --- --- ------- -- -- ----- -------------- ---- --------- ------- - ------ - -------- ----- ---------------- -------------- ----------------- -------- - ----- - -------- ----- ------ ----- ---------------- ----- ---------- ----- - ------------ - ----------------- ----- - -------- - -------- ----- - -------- ------------------ - -------- ----- -
最后，在 JavaScript 文件中实现标签的点击事件，以及切换视图的逻辑：
-- -------------------- ---- -------
----- ----- - -----------------------------------
-------------------- -- -
------------------------------ ------- -- -
-----------------------
----- ------ - --------------------------------------------
----------------- -- -
-----------------------------
---
-------------------------------------
----- ------------ - ----------------------------------- --------
------------------------- -- -
-- ---------------------- --- ------- -
---------------------------
- ---- -
------------------------------
-
---
---
---以上就是实现带有多视图的卡片效果的全部内容，你可以通过这个链接查看完整的代码和演示效果。
总结
在本文中我们介绍了 Material Design 中如何实现带有多视图的卡片效果。通过使用标签切换视图和设置样式隐藏其他视图，可以轻松地实现一个干净整洁的 UI 元素，帮助优化用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6529146f7d4982a6ebba6142