前言
如果你是前端开发工程师，那么一定会经常使用到一些常用的 UI 组件，比如卡片。而在卡片的使用过程中，如果没有现成的组件库可以使用，那么就需要开发者自己编写这些卡片组件，这会花费大量的时间和精力。而这时候， @limetech/mdc-card 就是你的救命稻草。
@limetech/mdc-card 是一个基于 Material Design 风格的卡片组件，它遵循了 Google Material Design Guidelines 设计规范。并且，它的成熟度已经到了第三阶段，也就是“生产可用”。
下面，我们就一起学习一下如何使用这个 npm 包。
安装
在使用 @limetech/mdc-card 之前，需要先安装这个 npm 包。可以使用下面的命令来安装：
npm install --save @limetech/mdc-card
使用
当你安装完 @limetech/mdc-card 之后，就可以开始使用它了。
编写 HTML
首先，我们需要编写一个最基本的 HTML 模板，来展示卡片组件。假设你现在要在你的页面中添加一个卡片，HTML 代码如下：
-- -------------------- ---- -------
---- -----------------
---- ---------------------------------
---- ---------------------- -------------------------
---- -------------------------------------------
------
---- --------------------------
--- --------------------- ----------------------------------------
--- --------------------- ----------------------------------------
------
---- --------------------------
------- ----------------- ---------------- ---------------------------- ----------
------- ----------------- ---------------- ---------------------------- ----------
------
------
------引入样式
你需要在你的项目中引入样式表，来使用 @limetech/mdc-card 。可以使用下面的命令来安装：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@limetech/mdc-card@3.0.0/dist/mdc-card.css">
初始化
最后，我们需要初始化卡片组件，使用下面的 JavaScript 代码：
import {MDCCard} from '@material/card';
const card = new MDCCard(document.querySelector('.mdc-card'));示例代码
下面是一个完整的示例代码，你可以将其复制到你的项目中使用：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------------- ------------
----- --------------- ---------------------------- -----------------
----- ---------------- -------------------------------------------------------------------------------
-------
------
---- -----------------
---- ---------------------------------
---- ---------------------- -------------------------
---- -------------------------------------------
------
---- --------------------------
--- --------------------- ----------------------------------------
--- --------------------- ----------------------------------------
------
---- --------------------------
------- ----------------- ---------------- ---------------------------- ----------
------- ----------------- ---------------- ---------------------------- ----------
------
------
------
------- -------------------------------------------------------------------------------------------------
------- --------------
------ --------- ---- -----------------
----- ---- - --- ---------------------------------------------
---------
-------
-------结论
通过本文，我们学习了如何使用 @limetech/mdc-card npm 包，并且提供了一个示例代码。现在，你可以在你的项目中快速地使用卡片组件了。同时，这也提高了你的工作效率，避免了需要自己编写卡片组件的烦恼。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/201032