前言
在现代化的 Web 前端开发中，使用组件化的思想已经成为一种标配，同样，基于组件的网站 UI 框架也越来越成熟。 Material Design 是一种由 Google 推出的跨平台设计语言，通过它，快速构建类似于 Google 等具有 Material Design 风格的网站非常简单。其中，@material/card 是一个用于展示卡片式内容的 npm 包，本文将详细介绍这个 npm 包的使用方法。
安装和引入
@material/card 是基于 Material Design 的 UI 组件库 Material Components for the Web（MDC Web）的一部分，可以选择通过 npm 安装：
npm install @material/card
然后，通过以下方式引入：
// CommonJS
const {MDCRipple} = require('@material/ripple');
const {MDCCard} = require('@material/card');
// ES Modules
import {MDCRipple} from '@material/ripple';
import {MDCCard} from '@material/card';展示卡片
@material/card 包含两种卡片显示方式，一种是简单的带头像和文字的基本卡片，另一种是在基本卡片的基础上加入图片、水平和竖直嵌套的卡片。
基本卡片
首先，我们需要在 HTML 代码中为卡片创建一个容器元素：
-- -------------------- ---- -------
---- --------------- -----------
-------- --------------------------
--- ---------------------- ----------------------------------- --- --- ------------
--- ---------------------------- ----- --- ---- ---- -------
----------
-------- ----------------------------------
----- ----- ----- --- ----- ----------- ---------- ----- --- -- ------- ------ ---------- -- ------ -- ------ ----- ------- -- ---- -- ----- ------- ---- ------- ------------ ------- ------- -----
----------
-------- --------------------------
------- ----------------- ------------------- ----------------------- -------------
----------
------接着，通过 JavaScript 将卡片初始化：
const card = new MDCCard(document.querySelector('.demo-card'));图片卡片
如果你想要在基本卡片的基础上添加一张图片，可以将图片插入到 section.mdc-card__primary 中：
-- -------------------- ---- -------
-------- --------------------------
---- ---------------------- -------------------------
---- ------------------------------- ------------------------ ---------------------------------
------
-----
--- ---------------------- ----------------------------------- --- --- ------------
--- ---------------------------- ----- --- ---- ---- -------
------
----------嵌套卡片
如果你想要将多个卡片水平或竖直嵌套，则需要使用 class.mdc-card__horizontal 和 class.mdc-card__vertical。下面是一个垂直嵌套的示例：
-- -------------------- ---- -------
---- --------------- ------------------ ----------------------------------------
-------- ------------------------ --------------------------------
---- ---------------------- -------------------------
---- ------------------------------- ------------------------ ---------------------------------
------
---- -----------------------------------
--- ---------------------- ----------------------------------- --- --- ------------
--- ---------------------------- ----- --- ---- ---- -------
------
----------
-------- -------------------------------- ----------------------------
----- ----- ----- --- ----- ----------- ---------- ----- --- -- ------- ------ ---------- -- ------ -- ------ ----- ------- -- ---- -- ----- ------- ---- ------- ------------ ------- ------- -----
----------
-------- --------------------------
------- ----------------- ------------------- ----------------------- -------------
----------
------自定义样式
@material/card 提供了多种 class，以便开发者根据需求自定义样式。下面是一些常用的 class：
.mdc-card：卡片容器.mdc-card__primary：卡片主内容部分.mdc-card__media：卡片媒体内容部分.mdc-card__title：卡片标题.mdc-card__subtitle：卡片副标题.mdc-card__supporting-text：卡片支持文本.mdc-card__actions：卡片操作区域
总结
在本文中，我们介绍了如何使用 npm 包 @material/card 来快速展示卡片式内容。通过本文的介绍，你学习到了如何安装和引入 @material/card，了解了基本卡片、图片卡片以及嵌套卡片的展示方法，并学习到了如何自定义样式。相信通过这篇文章的介绍，你已经可以快速构建出 Material Design 风格的卡片式内容，欢迎将此技术运用到你的项目中。下面是完整的示例代码：
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/111874