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

简介

uis（UI Style）是一个基于 Sass 和 BEM 的 CSS 样式库，适用于快速搭建 Web 前端界面。该包中包含了一系列常用的 UI 样式，如按钮、表单、列表等。

安装

可以使用 npm 或 yarn 安装 uis 包：

npm install uis

或

yarn add uis

使用

在 HTML 文件中，引入 uis.css 文件：

<link rel="stylesheet" href="path/to/uis.css">

然后就可以直接使用 uis 中的样式类了。

比如，如果要使用 uis 中的按钮样式，可以在 HTML 文件中这样写：

<button class="button">按钮</button>

组件

以下是 uis 中常用的一些组件和样式类。

按钮

.button：普通按钮。
.button-primary：主要按钮，通常用于强调主要操作。
.button-secondary：次要按钮，通常用于辅助操作。
.button-success: 成功按钮，通常用于表示操作成功。
.button-danger: 危险按钮，通常用于表示操作可能会导致不良后果。

<button class="button">普通按钮</button>
<button class="button-primary">主要按钮</button>
<button class="button-secondary">次要按钮</button>
<button class="button-success">成功按钮</button>
<button class="button-danger">危险按钮</button>

表单

.form：表单容器。
.form-group：表单组，通常包含标签和输入框。
.form-label：表单标签，通常用于描述输入框的内容。
.form-input：表单输入框，通常用于输入内容。
.form-textarea：表单文本框，通常用于输入多行内容。
.form-select：表单下拉框，通常用于输入选项。
.form-radio：单选框。
.form-checkbox：复选框。

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

列表

.list：列表容器。
.list-item：列表项。

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

总结

在本文中，我们学习了如何使用 npm 包 uis 快速搭建 Web 前端界面。通过本文所介绍的组件和样式类，可以帮助我们快速构建出漂亮而又实用的前端界面。

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