简介
@domain7/react-toolbox 是一个 React UI 组件库,提供了多种常用的 UI 组件,可快速构建具有良好体验和丰富功能的网页应用。
安装
可以使用 npm 或 yarn 安装:
--- ------- ---------------------- ------ ---- --- ----------------------
使用
导入需要的组件和样式
------ ----- ---- -------- ------ - ------- ----- - ---- ----------------------------- ------ --------------------------------------------------- ------ ----------------------------------------------- ------ ---------------------------------------------
在 render 函数中使用组件
-------- ------------- - ------ - ----- ------- ------------ --- ----------- -- ------------------ -- ------ ----------- ------------- ------- -- ------ -- -
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