什么是 tmone-core-react ?
tmone-core-react 是一款名为TMONE云平台的前端UI模板库，是建立在 React 技术栈基础上的一套企业级UI组件库，通过该组件库可以快速、简便、高效地制作出美观、易用、响应式的企业级WEB应用。该组件库提供了基础组件（如按钮、输入框、标签、表格等）、布局组件（如栅格、布局容器等）和业务组件（如数据分析图表、工作流、权限管理等）。同时，该库具有可定制性良好、易扩展性强、兼容性高等优点。
安装和使用
通过 npm 安装
npm install tmone-core-react --save
引入
import { Button } from 'tmone-core-react';基础用法
import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'tmone-core-react';
ReactDOM.render(<Button type="primary">Click me</Button>, mountNode);组件库文档
Button
按钮组件，提供基础类型、尺寸、颜色属性。
props
| prop | type | default | description |
|---|---|---|---|
| type | string | default | 按钮类型，可选值：primary/default/dashed/danger |
| size | string | default | 尺寸，可选值：small/default/large |
| disabled | boolean | false | 禁用 |
| loading | boolean | object | false | 加载状态，存在loading则按钮不可点击，object形式可定义 loading 样式 |
example
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ------ - ---- -------------------
----------------
-----
------- -------------- -------------------------
---------------------
------- ---------------------------
------- ------------- ------------------------
-------
----------
--Layout
布局组件，提供 Row 和 Col 两个组件实现栅格布局。
Row
行的容器组件，用于包裹 Col。
props
| prop | type | description |
|---|---|---|
| gutter | number | 栅格间隔，单位为 px，默认为0 |
| type | string | flex布局类型 |
| align | string | flex垂直对齐方式 |
| justify | string | flex水平对齐方式 |
| style | object | 行样式 |
| className | string | 自定义类名 |
| children | node | Col 组件 |
example
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ---- --- - ---- -------------------
----------------
-----
-----
---- ----------------------
---- ----------------------
------
-----
---- --------------------
---- --------------------
---- --------------------
------
-----
---- --------------------
---- --------------------
---- --------------------
---- --------------------
------
-------
----------
--Col
列的容器组件，用于包裹具体内容。
props
| prop | type | description |
|---|---|---|
| span | number | 栅格占位格数，默认占满24格 |
example
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ---- --- - ---- -------------------
----------------
-----
-----
---- ----------------------
---- ----------------------
------
-----
---- --------------------
---- --------------------
---- --------------------
------
-----
---- --------------------
---- --------------------
---- --------------------
---- --------------------
------
-------
----------
--总结
使用 tmone-core-react ，能够让开发者快速搭建美观易用的企业级WEB应用，使得开发效率得到极大提升。同时，该组件库具有可定制性良好、易扩展性强、兼容性高等特点，能够满足不同需求的定制化开发。
希望通过本文，能够让读者深入了解 tmone-core-react 组件库的使用，为日后的开发实践提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065b4ac6eb7e50355dbfc7