最近，谷歌公司推出了 Material Design Web Components，它从设计语言到用户体验都非常出色。这里我们要介绍的 npm 包 @authentic/mwc-card，是 Material Design Web Components 的一部分，提供一个定制化的卡片而无需依赖其他 CSS 样式。
安装
在你的项目中，使用 npm 安装 @authentic/mwc-card:
npm install @authentic/mwc-card
接下来，确保引入 MWC Card 索要的依赖：
<script type="module" src="@authentic/mwc-icon-button/mwc-icon-button.js"></script> <script type="module" src="@authentic/mwc-card/mwc-card.js"></script>
如何使用
MWC Card 在使用上相当简单。你只需要通过 HTMLElement 的方式使用即可。下面是一个基本的代码示例：
-- -------------------- ---- ------- ---------- ---- ------------- ---- ---------------------- -- ------ ---- ------------ -------------------------------------- ---- --------------- -------------------------------------------- ---- ---------------------- ------------------------------------ ---- -------------- ---------------------- ---------------- ---------------------------------- ---------------- ------------------------------- ---------------- ----------------------------------- ------ -----------展开代码
mwc-card是 Card 组件的名称slot属性用于指定卡片内部的 DOM 节点放置于何处mwc-icon-button是 Material Design Web Components 的 Icon Button 组件
样式设计
样式设计一直是前端开发中的一个难点。@authentic/mwc-card 提供大量的自定义选择器，让你能够轻松定制自己所需的外观。下面是一些可用的选择器：
.card__title.card__subtitle.card__text.card__actions
你可以通过覆盖这些选择器来改变 MWC Card 的样式。
总结
通过本文，你应该学会了如何在自己的前端项目中使用 @authentic/mwc-card 组件，并且了解了它的基本设计和样式定制。希望这篇文章能对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/111820
