React-rainbow-ui 是一个 React UI 组件库，它提供了很多漂亮的组件，比如表格、图表、按钮等等。使用它可以快速开发一个 UI 界面，让我们先来看一下它的基本使用方法。
安装
使用 npm 安装 react-rainbow-ui，可以在项目目录下输入以下指令：
--- ------- ----------------
这时就可以在项目中使用 react-rainbow-ui 提供的组件了。
简单例子
以一个简单的页面为例子，在首页上加一个按钮，当我们点击它的时候弹出一个模态框，模态框里面有一个表单：
------ ----- ---- --------
------ ------ ---- -------------------------------------
------ ----- ---- ------------------------------------
------ ----- ---- ------------------------------------
------ ------- ----- ---- ------- --------------- -
------------------ -
-------------
---------- - -
---------- ------ -- ---------
----- -
----- ---
------ --
-
--
-
----------------- - -- -- -
-- -----
---------------
---------- ----
---
-
---------------- - -- -- -
-- -----
---------------
---------- -----
---
-
---------------- - ------- ------ -- -
-- --------- -----
---------------
----- ----------------- ---------------- --------- -------
---
-
---------------- - -- -- -
-- ----
------------ ------------------------ ------ ---------------------------
------------------------
-
------ -- -
----- - ---------- ---- - - -----------
------ -
-----
--- ------ ---
------- --------------- -----------------------------------------------
--- --- ---
------ -------------
------------------
---------------------------------------
--- -- ---
------ ----------------- ---------- ----------- -- ----------------------------- ---------------- --
------ ------------------ ---------- ----------- -- ------------------------------ ---------------- --
------- --------------- -------------------------------------------
--------
------
--
-
-这个例子中使用了 Button、Modal 和 Input 三个组件，分别用来渲染按钮、模态框和表单输入框。使用 react-rainbow-ui 的组件就像是普通的 React 元素一样，只需要按照文档说明使用即可。
深入
React-rainbow-ui 的使用不止于此，它提供了很多高级特性，这里介绍一些：
主题定制
React-rainbow-ui 在底层实现上使用了 less，你可以通过修改其内置变量来自定义主题。比如我们可以将所有基础颜色都修改为粉色：
-- ---------- ---- -- -- ------- ---------------------------------------------- -- ------- -- --------------------- ----- -------------------------- ----- -------------------- ----- -- ------------ --
这里修改了三个变量，分别是基础品牌颜色、背景颜色和文本颜色。修改之后在编译之后使用这个主题就是粉色了。
语言国际化
React-rainbow-ui 提供了国际化组件，让我们方便的进行多语言处理。使用它我们可以定义多种语言，在组件中使用 Select 组件可以选择当前语言。组件会自动根据当前语言在定义的语言包中查找相应的翻译，从而实现多语言界面。使用起来非常简单：
------ ----- ---- --------
------ - ------------- -------------- - ---- ---------------------------------------------------
------ ------ ---- -------------------------------------
----- -------- - ----------------
------ -
--- ------------
------------ ------ ---------
--------------- ------- ---------
--
-------- -
--- --------------
------------ -------- ---------
--------------- -----------
--
---
----- ----------- ------- --------------- -
------------- -
--------
---------- - -
------- -----
----- --------
--
-
------------------ - -------- -- -
--------------- ------ ---
-
---------------- - --- -- -
--------------- ----- -------------- ---
-
-------- -
----- - ------- ---- - - -----------
------ -
-------------
---------------
-------------------
-------------------
-----
------- -------------- -----------------------------------
------- ---------------------------
------- --------------------------
------- --------------------------
---------
------ ----------- ------------ -------------------------------- --
-------------------------------------- - ---- -------
---------------------------------------------
------
---------------
--
-
-这个例子中定义了两个语言包，英语和法语。当用户选择语言之后，组件会自动更新语言并在页面上渲染对应的翻译。
结论
React-rainbow-ui 是一个非常优秀的 React UI 组件库，提供了很多实用的组件。在深入了解之后，我们可以使用主题定制和多语言组件来打造更具有个性化的 UI 界面。如果你还没用过它，推荐你去试试。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60065b41c6eb7e50355dbce9