npm 包 liqd-style 使用教程-JavaScript中文网-JavaScript教程资源分享门户

什么是 liqd-style？

liqd-style 是一个用于前端开发的 npm 包，它提供了一系列常用的样式类和样式变量，能够快速帮助开发者实现常见的样式效果。

如何安装 liqd-style？

在终端中执行以下命令即可安装 liqd-style：

npm install liqd-style --save

如何使用 liqd-style？

在你的 html 文件中添加如下代码，即可使用 liqd-style 中的样式类：

<link rel="stylesheet" href="./node_modules/liqd-style/dist/liqd-style.min.css">

liqd-style 中有哪些样式类？

liqd-style 中提供了很多有用的样式类，包括：

文字样式

.liqd-text-left 左对齐
.liqd-text-center 居中对齐
.liqd-text-right 右对齐
.liqd-text-justify 两端对齐
.liqd-text-wrap 自动换行
.liqd-text-nowrap 不自动换行
.liqd-text-lowercase 小写
.liqd-text-uppercase 大写
.liqd-text-capitalize 首字母大写

标题样式

.liqd-heading-1 H1 标题
.liqd-heading-2 H2 标题
.liqd-heading-3 H3 标题
.liqd-heading-4 H4 标题
.liqd-heading-5 H5 标题
.liqd-heading-6 H6 标题

颜色样式

.liqd-color-primary 主要颜色（通常为蓝色）
.liqd-color-secondary 次要颜色（通常为灰色）
.liqd-color-success 成功颜色（通常为绿色）
.liqd-color-warning 警告颜色（通常为橙色）
.liqd-color-danger 危险颜色（通常为红色）

按钮样式

.liqd-btn-default 默认按钮样式
.liqd-btn-primary 主要按钮样式
.liqd-btn-success 成功按钮样式
.liqd-btn-warning 警告按钮样式
.liqd-btn-danger 危险按钮样式
.liqd-btn-disabled 禁用按钮样式
.liqd-btn-outline 描边按钮样式

输入框样式

.liqd-input-default 默认输入框样式
.liqd-input-primary 主要输入框样式
.liqd-input-success 成功输入框样式
.liqd-input-warning 警告输入框样式
.liqd-input-danger 危险输入框样式
.liqd-input-disabled 禁用输入框样式

举个例子！

假设我们要创建一个带有描边的绿色按钮，在使用 liqd-style 之前，我们需要手动编写 css 样式：

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

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

------------- -
  ------- ------------
  ----------------- --------
  ------------- --------
-展开代码

而使用 liqd-style，我们仅仅需要添加 .liqd-btn-primary 和 .liqd-btn-outline 两个样式类即可：

<button class="liqd-btn-primary liqd-btn-outline">点击我</button>

<link rel="stylesheet" href="./node_modules/liqd-style/dist/liqd-style.min.css">

总结

使用 liqd-style 可以极大地简化前端开发，提高开发效率和代码可读性。请注意，使用 liqd-style 并不代表你可以完全放弃编写自己的 css 样式，而是在合适的场景下使用它，以达到更快速的前端开发。

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

npm 包 liqd-style 使用教程