简介
在前端开发中，UI 组件库是不可或缺的一部分。而在众多的 UI 组件库中，futureui 是一个优秀的 npm 包，拥有完整的组件体系以及丰富的功能。
本文将介绍如何使用 futureui，并给出详细的教程以及示例代码，帮助开发人员更加深入地了解目前前端的主流 UI 组件库。
安装
使用 npm 进行安装：
npm install futureui --save
使用
在要使用 futureui 的项目中，先引入相关的 CSS 文件和 JavaScript 文件：
<!-- 引入 CSS 文件 --> <link rel="stylesheet" href="path/to/futureui.min.css"> <!-- 引入 JavaScript 文件 --> <script src="path/to/futureui.min.js"></script>
然后，在 HTML 中添加相应的代码即可使用 futureui 的组件：
<div class="fu-button">Click me!</div>
组件
按钮（Button）
按钮是用户与系统交互的基本方式之一，futureui 也提供了 button 组件。
使用代码示例：
<div class="fu-button">Click me!</div>
按钮组件有多种样式、尺寸和状态。以下是我们可以使用的某些类。
样式
fu-button– 默认样式fu-button-primary– 首选项样式fu-button-secondary– 次要样式fu-button-danger– 危险样式fu-button-transparent– 透明样式
尺寸
fu-button-xs– 超小尺寸fu-button-sm– 小尺寸fu-button-md– 中等尺寸fu-button-lg– 大尺寸fu-button-xl– 超大尺寸
状态
fu-button-disabled– 禁用状态fu-button-active– 活动状态fu-button-loading– 加载状态
文本框（Input）
向用户收集信息时，文本框是最基本的 UI 应用程序之一，futureui 的 input 组件可以满足你日常开发中的需求。
使用代码示例：
<input class="fu-input" type="text" placeholder="请输入内容">
input 组件也提供了多种样式和状态。以下是我们可以使用的某些类。
样式
fu-input– 默认样式fu-input-primary– 首选项样式fu-input-secondary– 次要样式fu-input-danger– 危险样式fu-input-transparent– 透明样式
状态
fu-input-disabled– 禁用状态fu-input-readonly– 只读状态
对话框（Dialog）
对话框是在应用程序中描述信息、询问问题、显示警告以及显示成功的信息等的一种弹出式 UI 元素。
使用代码示例：
<div class="fu-dialog">
<div class="fu-dialog-header">提示</div>
<div class="fu-dialog-body">是否确认执行此操作？</div>
<div class="fu-dialog-footer">
<div class="fu-button fu-button-primary">确认</div>
<div class="fu-button">取消</div>
</div>
</div>表格（Table）
表格是呈现数据的常见方式之一。futureui 的 table 组件可以满足你日常开发中的需求。
使用代码示例：
-- -------------------- ---- -------
------ -----------------
-------
----
-------------
--------------
-------------
-----
--------
-------
----
--------------
--------------------------
------- ---- ---------
-----
----
------------
------------------------
------- --------------
-----
----
----------------
----------------------------
---------------
-----
--------
--------有多种样式和大小可以选择，具体可以查看每一个类的定义。
总结
futureui 是一个非常优秀的 npm 包，给前端开发带来了极大的便利。本文从使用方法，以及具体的组件来系统的介绍了在日常工作中怎么样使用起来。不论是最基础的组件还是更高级的组件，futureui 都可以满足你的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cd381e8991b448e6661