npm 包 @mercadoni/elementals 使用教程

介绍

@mercadoni/elementals 是一个提供了一系列前端组件的 npm 包，该包包括了各种组件，如按钮、表单、列表、卡片等，可以帮助您快速搭建一个现代化的网站或应用程序。

安装

首先，您需要安装 Node.js 和 npm 包管理器。您可以从官方网站下载安装程序。

一旦您安装好 Node.js 和 npm 包管理器，您可以使用以下命令安装 @mercadoni/elementals：

npm install @mercadoni/elementals --save

使用

导入所需的组件并将其添加到您的 HTML 中，例如：

<!-- import CSS -->
<link rel="stylesheet" href="node_modules/@mercadoni/elementals/dist/elementals.css">

<!-- import JS -->
<script src="node_modules/@mercadoni/elementals/dist/elementals.js"></script>

<!-- component -->
<button class="el-button el-button--primary">Click me</button>

组件

以下是一些可用组件的示例：

按钮

<button class="el-button">默认按钮</button>
<button class="el-button el-button--primary">主要按钮</button>
<button class="el-button el-button--warning">警告按钮</button>
<button class="el-button el-button--danger">危险按钮</button>

表单

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

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

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

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

列表

<ul class="el-list">
  <li class="el-list-item">列表项 1</li>
  <li class="el-list-item">列表项 2</li>
  <li class="el-list-item">列表项 3</li>
</ul>

卡片

<div class="el-card">
  <div class="el-card-header">卡片标题</div>
  <div class="el-card-body">卡片内容</div>
  <div class="el-card-footer">卡片底部</div>
</div>

自定义

如果您需要自定义样式或使用其他框架（例如 React、Vue.js），可以使用 Sass 源文件或直接导入已编译的 CSS 文件。

Sass 源文件

您可以在您的 Sass 中导入 @mercadoni/elementals 的 Sass 源文件，并修改相应的变量即可自定义样式。

例如，您可以使用以下命令从 @mercadoni/elementals 导入 Sass 文件：

@import "~@mercadoni/elementals/src/scss/elementals";

编译的 CSS 文件

@mercadoni/elementals 也提供了编译好的 CSS 文件。您可以直接从 npm 包中导入已编译的 CSS 文件。

例如，您可以使用以下命令从 @mercadoni/elementals 导入编译好的 CSS 文件：

@import "~@mercadoni/elementals/dist/elementals.css";

结论

@mercadoni/elementals 是一个强大的 npm 包，它提供了一系列的前端组件，可以帮助您快速搭建现代化的网站或应用程序。通过本文所提供的教程，您应该已经学会了如何安装和使用这一 npm 包，并且掌握了自定义样式的方法。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/151565