简介
skeate/redux-ui 是一个基于 Redux 的前端 UI 库，它提供了一系列的 React 组件以及相关的 Redux 状态管理，能够快速帮助我们搭建起一个基于最新前端开发技术的 Web 应用。在本篇文章中，我们将会介绍如何使用 skeate/redux-ui。
安装
在终端中，运行以下命令以安装 skeate/redux-ui：
npm install @skeate/redux-ui --save
使用
引用
在你的 JavaScript 中引用 skeate/redux-ui：
-- -------------------- ---- ------- ------ - ------- --------- ------ ------- ------ ------- ------- - ---- -------------------
Button 组件
使用 Button 组件，可以很容易地创建按钮：
<Button
onClick={() => alert("Hello, world!")}
className="primary"
disabled={false}
>
Click me!
</Button>Checkbox 组件
使用 Checkbox 组件，可以创建一个可定制的复选框：
<Checkbox
onChange={newValue => console.log("Checkbox value is now", newValue)}
disabled={false}
checked={true}
className="primary"
>
Check me!
</Checkbox>Input 组件
使用 Input 组件，可以创建一个可输入的文本框：
<Input
onChange={newValue => console.log("New value is", newValue)}
value="Hello, world!"
placeholder="Enter some text here"
disabled={false}
className="primary"
/>Select 组件
使用 Select 组件，可以提供一个下拉选项列表，供用户选择：
-- -------------------- ---- -------
-------
----------
- ------ ------- --- ------ --- --
- ------ ------- --- ------ --- --
- ------ ------- --- ------ --- -
--
---------
------------------ -- ---------------- ----- ---- ----------
----------------
-------------------
--Modal 组件
使用 Modal 组件，可以打开一个可定制的对话框：
<Modal
title="Modal Title"
open={true}
onClose={() => console.log("Modal closed")}
className="primary"
>
Hello, world!
</Modal>Navbar 组件
使用 Navbar 组件，可以创建一个可带 Logo 的导航栏：
-- -------------------- ---- -------
-------
--------- --------
------------------------------------------
--------
- ------ ------- ---- --- --
- ------ -------- ---- -------- --
- ------ ---------- ---- ---------- -
--
-------------------
--Sidebar 组件
使用 Sidebar 组件，可以创建一个可收缩的侧边栏菜单：
-- -------------------- ---- -------
--------
-----------
----------- -- -------------------- ---------
--------
- ------ ------- ----- ------- ---- --- --
- ------ -------- ----- ------- ---- -------- --
- ------ ---------- ----- ------- ---- ---------- -
--
-------------------
--结论
@skeate/redux-ui 是一个强大的 UI 库，提供了许多高质量的 React 组件和 Redux 状态管理，能够帮助我们以最有效率的方式构建前端 Web 应用。我们希望你能够通过本文学会如何使用这个库。如果你对此有任何疑问，请在评论区留言，我们将尽全力为你解答。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005630381e8991b448e0df0