[发明专利]一种基于React的通用UI库

说明书

本发明公开了一种基于React的通用UI库，包括按钮、弹窗、空状态、图标、加载中、菜单、通知、分页、进度、二维码、选择器、评分组件、轮播图、复选框、表格、标签、提示、网页浏览器18种组件，Web前端开发者使用该通用UI库，无需开发CSS(样式表)就可以快速高效的构建统一风格的网站页面和Web应用。

技术领域

本发明属于Web前端开发技术领域，涉及前端组件业务和样式分离，数据驱动界面的开发方式，特别是一种基于React的通用UI库。

背景技术

一个网页页面通常由HTML(超文本标记语言，Hyper Text Markup Language)代码、CSS(层叠样式表，Cascading Style Sheets)代码和JS(脚本代码，JavaScript)代码三个部分组成。为了便于开发，往往将一个网页划分为多个JS模块，每个JS模块均由HTML代码、CSS代码和JS代码三个部分组成。开发人员以JS代码作为单个模块的入口，HTML代码片段和CSS代码片段则作为该JS模块的一个或多个UI(用户界面，User Interface)模块被所引入。开发人员开发JS模块的过程中，不得不在JS代码工作栈和UI模块工作栈之间切换，导致开发效率低。而业务影响数据，数据的变动决定渲染界面(图1)，因此，使开发者可以抽离应用共通元素形成组件，而提高多项目开发效率是申请人研究的课题之一。

发明内容

为了解决在多个工作栈之间切换导到效率低下的技术问题，本发明的目的在于，提供一种基于React的通用UI库。

为了实现上述任务，本发明采取如下的技术解决方案：

一种基于React的通用UI库，其特征在于，包括以下18种组件：

1)按钮，该组件标签名为Button，类似于HTML原生的button；相比于原生button扩展的icon、theme、loading三个属性；icon属性可在按钮中自动显示中指定的图标，theme属性可以在不写CSS的情况下指定按钮的样式，loading属性表示当前按钮处于任务执行阶段；

其属性定义为：

export interface ButtonProps{

onClick？:MouseEventHandlerHTMLButtonElement

className？:string

style？:CSSProperties

theme？:string

loading？:boolean

text:ReactText

disabled？:boolean

id？:string

}

2)弹窗，该组件标签名为Dialog，类似于原生的提示框，确认框和输入框的组合，该组件提供了在弹出层中显示内容的能力，并提供了类似Windows窗口的可拖动功能；使用该组件除了可以达到和使用原生提示框，确认框和输入框一样的效果，比原生的弹窗在样式上更加贴合当前的网页风格；除了提示框、确认框和输入框之外，该组件还支持拖动窗口、输入框输入多行文本、输入框输入密码、在弹窗中显示网页内容等多种功能；

其属性定义为：

export interface IDialogOption{

maximize？:boolean

maximizable？:boolean

doubleClickTitle2Max？:boolean