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

权利要求书

1.一种基于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

resizable？:boolean

url？:string

icon？:string|ReactNode|boolean

title？:string|boolean

onResize？:DialogOnResize

onMaximizing？:DialogOnMaximize

onMaximized？:DialogOnMaximize

onClosing？:DialogOnClose

onClosed？:DialogOnClose

id？:string

buttons？:DialogButton[]

movable？:boolean

height？:ReactText

width？:ReactText

minWidth？:ReactText

minHeight？:ReactText

maxWidth？:ReactText

maxHeight？:ReactText

componentDidMount？:DialogOnClose

}

export interface DialogProps extends IDialogOption{

children:ReactNode

}

3)空状态，该组件标签名为Tag，原生HTML无该组件，该组件被设计用来显示列表或表格没有数据时的提示信息；在表格组件或其他需要显示数据，但此时还没有数据时的提示信息，使用户可以一眼看出当前没有数据而并非是错误导致的没有显示；

其属性定义为：

export interface EmptyProps{

description？:ReactNode

icon？:ReactNode

}

4)图标，该组件标签名为Icon，原生HTML无该组件，该组件用来显示图标信息；弹窗组件的标题图标，按钮组件的加载图标都是使用的该组件；

其属性定义为：

5)加载中，该组件标签名为Loading，原生HTML无该组件，该组件可在数据加载时给用户以友好提示；让用户清楚的知道当前是在加载数据；当数据加载完成后显示数据，如果当前没有数据，显示空状态；

其属性定义为：

6)菜单，该组件标签名为Menu，类似于原生标签menu，提供了原生菜单不具备的多级菜单支持、子元素支持等功能，且无需额外写CSS样式；有时在做管理系统时不可避免的需要用到菜单，使用该组件不需要写大量的代码，只需要简单的配置就可以显示下拉菜单或右键菜单；

其属性定义为：

7)通知，该组件无显式标签，通过Notifications类的静态方法调用，可在浏览器右上角、右下角、左上角、左下角或中心位置显示可操作的通知条；使用该组件可以在屏幕中弹出一个提示框以告知用户数据的变化；

其属性定义为：

8)分页，该组件的标签名为Pager，原生HTML无该标签，该组件提供了分页显示以及跳转能力，使用该组件无需复杂的计算，只需要数据总数量，页码，页大小就可以生成一个可点击的分页条；表格组件中的分页也是使用的该组件；

其属性定义为：

9)进度条，该组件的标签名为Progress，原生HTML无该标签，该组件提供了显示耗时操作进度信息的能力，在上传文件或加载数据的时候使用该组件可以让用户清楚的知道当前上传或加载的进度信息；

其属性定义为：

10)二维码，该组件标签名为QrCode，原生HTML无该标签，该组件提供了显示二维码的能力，使用该组件只需要提示文本内容和图标就可以生成一个带图标的二维码，而无需编写其他代码；

其属性定义为：

11)选择器，该组件的标签名为Select，类似于原生标签select，提供了原生标签不具备的搜索、动态加载和多选能力；原生select标签只能选择固定的内容，该组件可以选择固定内容，也可以在下拉后让用户输入内容进行本地或远程搜索，且该组件支持多选，可以同时选择多个选择；

其属性定义为：

12)评分组件，该组件标签名为Stars，原生HTML无该标签，该组件提供了一组可点选的元素以用做评分，且可灵活定义要显示的星星内容和个数；主要用于服务评分、订单评价等需要用户打分的地方；

其属性定义为：

13)轮播图，该组件的标签名为Swiper，原生HTML无该标签，该组件提供了一种用于展示轮播内容的容器，使用该组件可直接生成轮播图或轮播可交互内容；

其属性定义为：

14)复选框，该组件标签名为Checkbox，类似于原生HTML的input type＝”checkbox”/，提供了原生标签不具备的自定义样式功能和半选中功能；该组件除了提供和原生复选框一样的功能外还在选中和取消时有转场动画，其半选中功能还可用于多级选择时在父级展示子级的全选和非全选情况；

其属性定义为：

15)表格，该组件标签名为Table，类似于原生HTML的table，提供了原生标签不具备的排序、筛选、分页、拖动等能力；使用时无需手动写tr，td标签，只需把数据和数据和展示的映射关系传给该组件，组件内部会自动把数据渲染出来；

其属性定义为：

16)标签，该组件标签名为Tag，原生HTML无该标签，该组件提供了醒目展示少量信息的能力，同时选择框的多选展示也是使用的该组件；

其属性定义为：

17)提示，该组件无显示标签，通过Toast类的静态方法调用，该组件提示了，在网页上方、中心、下方、右上、右下、左上、左下显示少量提示信息的能力，可在用户提交信息成功或失败后在不改变页面结构的情况下给出提示；

其属性定义为：

18)网页浏览器，该组件的标签名为WebView，类似于原生HTML的iframe，提供了原生标签不具备的自定义网页window对象的能力，弹窗中的网页使用的就是该组件；

其属性定义为：