介绍
@tongdun/react-ui-form 是一个 React UI 组件库，提供了一些常用的 UI 组件，帮助开发者快速构建前端应用。
包含的组件有 Input、Checkbox、Radio、Switch、Select、TextArea 等等。这些组件具备高度的可自定义性，开发者可以根据自己的业务需求进行自定义配置。
安装
首先，你需要安装 npm。如果你已经安装了，可以直接使用以下命令安装 @tongdun/react-ui-form：
npm install --save @tongdun/react-ui-form
使用
@tongdun/react-ui-form 的使用非常简单，只需要引入相应的组件，然后在需要展示组件的页面中进行使用即可。下面分别介绍一下各个组件的使用方法。
Input
Input 是一个输入框组件，可以设置不同的 type 来展示不同类型的输入框。例如，type="text" 表示文本输入框，type="number" 表示数字输入框等等。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- -------------------------
----- ------- ------- --------------- -
-------- -
------ -
------ ----------- -------------------- --
--
-
-Checkbox
Checkbox 是一个复选框组件，可以设置不同的 value 来展示不同的选项。
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- -------------------------
----- ---------- ------- --------------- -
-------- -
------ -
--------- ------------------------
--------- ------------------------
--
-
-Radio
Radio 是一个单选框组件，可以设置不同的 value 来展示不同的选项。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- -------------------------
----- ------- ------- --------------- -
-------- -
------ -
------ ---------------------
------ ---------------------
--
-
-Switch
Switch 是一个开关组件，点击可切换状态。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- -------------------------
----- -------- ------- --------------- -
-------- -
------ -
------- --
--
-
-Select
Select 是一个下拉框组件，可以设置多个 options 供用户选择。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- -------------------------
----- -------- ------- --------------- -
-------- -
------ -
--------
------- ----------------------
------- ----------------------
---------
--
-
-TextArea
TextArea 是一个文本框组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- -------------------------
----- ---------- ------- --------------- -
-------- -
------ -
--------- -------- --------- --
--
-
-自定义样式
我们提供了一些默认的样式，但是你也可以使用自己的样式。
我们使用了 CSS Modules 技术来管理样式。所以，在使用自定义样式的时候，你需要添加一个样式表，例如:
/* styles.css */
.my-input {
color: red;
background-color: gray;
}在组件中使用自定义样式：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- -------------------------
------ ------ ---- ---------------
----- ------- ------- --------------- -
-------- -
------ -
------ ----------- -------------------- ------------------------------ --
--
-
-总结
@tongdun/react-ui-form 是一个非常实用的 React 组件库，提供了一些常用的 UI 组件，帮助开发者快速构建前端应用。通过本文的介绍，你已经可以非常容易地使用这些组件了，并且可以根据需要自定义样式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668f7d9381d61a3540f2a