简介
@domain7/react-toolbox 是一个 React UI 组件库，提供了多种常用的 UI 组件，可快速构建具有良好体验和丰富功能的网页应用。
安装
可以使用 npm 或 yarn 安装：
npm install @domain7/react-toolbox --save yarn add @domain7/react-toolbox
使用
导入需要的组件和样式
import React from 'react'; import { Button, Input } from '@domain7/react-toolbox/lib'; import '@domain7/react-toolbox/lib/FontIcon/FontIcon.css'; import '@domain7/react-toolbox/lib/Button/Button.css'; import '@domain7/react-toolbox/lib/Input/Input.css';在 render 函数中使用组件
function MyComponent() { return ( <div> <Button label="Click me" onClick={() => alert('Clicked!')} /> <Input type="text" value="Hello, world!" /> </div> ); }
API 文档
Button
Button 组件用于创建按钮。
Props
accent
类型：boolean
默认值：false
是否使用强调颜色。
disabled
类型：boolean
默认值：false
是否禁用按钮。
flat
类型：boolean
默认值：false
是否使用扁平样式（无背景色，仅有边框）。
href
类型：string
默认值：undefined
如果设置了该属性，则渲染成 <a> 标签，点击可以跳转到指定链接。
icon
类型：ReactNode
默认值：null
按钮上显示的图标。可以使用 FontIcon 组件显示自定义图标。
label
类型：string
默认值：''
按钮上显示的文本。
mini
类型：boolean
默认值：false
是否使用小尺寸。
neutral
类型：boolean
默认值：false
是否使用中性颜色。
onClick
类型：(event: MouseEventHandler) => void
默认值：undefined
点击按钮时触发的回调函数。
raised
类型：boolean
默认值：false
是否启用凸起样式（有背景色）。
ripple
类型：boolean
默认值：true
是否启用点击时水波纹效果。
Input
Input 组件用于创建表单输入框。
Props
defaultValue
类型：string
默认值：undefined
输入框的默认值。如果同时设置了 value 和 defaultValue，则 value 优先。
disabled
类型：boolean
默认值：false
是否禁用输入框。
error
类型：string
默认值：undefined
输入框的错误信息。如果设置了该属性，则会显示错误样式，并显示该属性的值。
floating
类型：boolean
默认值：false
是否启用浮动标签（即在输入框上方显示标签）。
hint
类型：string
默认值：undefined
输入框的提示信息。如果设置了该属性，则会显示提示样式，并显示该属性的值。
label
类型：string
默认值：undefined
输入框的标签。如果设置了该属性，则会显示标签，并在浮动模式下显示为浮动标签。
multiline
类型：boolean
默认值：false
是否启用多行模式。
readOnly
类型：boolean
默认值：false
是否只读输入框。
required
类型：boolean
默认值：false
输入框是否必填。
type
类型：string
默认值：text
输入框的类型。可以是 text、password、number、email 等常见类型。
value
类型：string
默认值：undefined
输入框的值。如果同时设置了 value 和 defaultValue，则 value 优先。
方法
focus
聚焦输入框。
-- -------------------- ---- ------- -- -- --- ------ ------ - ------ - ---- -------- ------ - ----- - ---- ----------------------------- -------- ------------- - ----- -------- - ------------- ------ ------ -------------- --- - -- -- ----- -- -------- ------------- - ------------------------- -
示例代码
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ -
-------
------
--------
- ---- -----------------------------
------ ---------------------------------------------------
------ -----------------------------------------------
------ ---------------------------------------------
-------- ------------- -
----- ------- --------- - -------------
-------- ------------- -
------------- -----------
-
------ -
-----
------
-----------
------------
-------------
--------------- -- -----------------------------
--
--- --
------
---------------
----------------
-------- ----- - -----------
---------------
--------
--
--- --
-------
--------------
------
---------------------
--------------------------------
--
------
--
-结语
@domain7/react-toolbox 提供了丰富的 UI 组件和规范的设计语言，很适合用于构建现代 Web 应用。希望本文能对你学习和使用该组件库有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005663881e8991b448e2319