CN113010156A - 一种基于React的通用UI库 - Google Patents

一种基于React的通用UI库 Download PDF

Info

Publication number
CN113010156A
CN113010156A CN202110233671.2A CN202110233671A CN113010156A CN 113010156 A CN113010156 A CN 113010156A CN 202110233671 A CN202110233671 A CN 202110233671A CN 113010156 A CN113010156 A CN 113010156A
Authority
CN
China
Prior art keywords
component
native
attributes
tag
data
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202110233671.2A
Other languages
English (en)
Inventor
王燕妮
翟会杰
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Xian University of Architecture and Technology
Original Assignee
Xian University of Architecture and Technology
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Xian University of Architecture and Technology filed Critical Xian University of Architecture and Technology
Priority to CN202110233671.2A priority Critical patent/CN113010156A/zh
Publication of CN113010156A publication Critical patent/CN113010156A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/31—Programming languages or programming paradigms
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Computing Systems (AREA)
  • Human Computer Interaction (AREA)
  • User Interface Of Digital Computer (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

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

Description

一种基于React的通用UI库
技术领域
本发明属于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？:MouseEventHandler<HTMLButtonElement>
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无该组件，该组件用来显示图标信息；弹窗组件的标题图标，按钮组件的加载图标都是使用的该组件；
其属性定义为：
Figure BDA0002959111940000031
5)加载中，该组件标签名为Loading，原生HTML无该组件，该组件可在数据加载时给用户以友好提示；让用户清楚的知道当前是在加载数据；当数据加载完成后显示数据，如果当前没有数据，显示空状态；
其属性定义为：
Figure BDA0002959111940000041
6)菜单，该组件标签名为Menu，类似于原生标签menu，提供了原生菜单不具备的多级菜单支持、子元素支持等功能，且无需额外写CSS样式；有时在做管理系统时不可避免的需要用到菜单，使用该组件不需要写大量的代码，只需要简单的配置就可以显示下拉菜单或右键菜单；
其属性定义为：
Figure BDA0002959111940000042
7)通知，该组件无显式标签，通过Notifications类的静态方法调用，可在浏览器右上角、右下角、左上角、左下角或中心位置显示可操作的通知条；使用该组件可以在屏幕中弹出一个提示框以告知用户数据的变化；
其属性定义为：
Figure BDA0002959111940000043
8)分页，该组件的标签名为Pager，原生HTML无该标签，该组件提供了分页显示以及跳转能力，使用该组件无需复杂的计算，只需要数据总数量，页码，页大小就可以生成一个可点击的分页条；表格组件中的分页也是使用的该组件；
其属性定义为：
Figure BDA0002959111940000051
9)进度条，该组件的标签名为Progress，原生HTML无该标签，该组件提供了显示耗时操作进度信息的能力，在上传文件或加载数据的时候使用该组件可以让用户清楚的知道当前上传或加载的进度信息；
其属性定义为：
Figure BDA0002959111940000052
10)二维码，组件效果如图10，该组件标签名为QrCode，原生HTML无该标签，该组件提供了显示二维码的能力，使用该组件只需要提示文本内容和图标就可以生成一个带图标的二维码，而无需编写其他代码；
其属性定义为：
Figure BDA0002959111940000053
Figure BDA0002959111940000061
11)选择器，该组件的标签名为Select，类似于原生标签select，提供了原生标签不具备的搜索、动态加载和多选能力；原生select标签只能选择固定的内容，该组件不只可以选择固定内容，也可以在下拉后让用户输入内容进行本地或远程搜索，且该组件支持多选，可以同时选择多个选择；
其属性定义为：
Figure BDA0002959111940000062
12)评分组件，该组件标签名为Stars，原生HTML无该标签，该组件提供了一组可点选的元素以用做评分，且可灵活定义要显示的星星内容和个数；主要用于服务评分、订单评价等需要用户打分的地方；
其属性定义为：
Figure BDA0002959111940000063
13)轮播图，该组件的标签名为Swiper，原生HTML无该标签，该组件提供了一种用于展示轮播内容的容器，使用该组件可直接生成轮播图或轮播可交互内容；
其属性定义为：
Figure BDA0002959111940000071
14)复选框，该组件标签名为Checkbox，类似于原生HTML的<input type＝”checkbox”/>，提供了原生标签不具备的自定义样式功能和半选中功能；该组件除了提供和原生复选框一样的功能外还在选中和取消时有转场动画，其半选中功能还可用于多级选择时在父级展示子级的全选和非全选情况；
其属性定义为：
Figure BDA0002959111940000072
15)表格，该组件标签名为Table，类似于原生HTML的table，提供了原生标签不具备的排序、筛选、分页、拖动等能力；使用时无需手动写tr，td标签，只需把数据和数据和展示的映射关系传给该组件，组件内部会自动把数据渲染出来；
其属性定义为：
Figure BDA0002959111940000073
Figure BDA0002959111940000081
16)标签，该组件标签名为Tag，原生HTML无该标签，该组件提供了醒目展示少量信息的能力，同时选择框的多选展示也是使用的该组件；
其属性定义为：
Figure BDA0002959111940000082
17)提示，该组件无显示标签，通过Toast类的静态方法调用，该组件提示了，在网页上方、中心、下方、右上、右下、左上、左下显示少量提示信息的能力，可在用户提交信息成功或失败后在不改变页面结构的情况下给出提示；
其属性定义为：
Figure BDA0002959111940000083
Figure BDA0002959111940000091
18)网页浏览器，该组件的标签名为WebView，类似于原生HTML的iframe，提供了原生标签不具备的自定义网页window对象的能力，弹窗中的网页使用的就是该组件；
其属性定义为：
Figure BDA0002959111940000092
本发明的基于React的通用UI库，提供了原生HTML不具备的标签，扩展了原生HTML标签的能力，以达到方便的组件复用目的。Web前端开发者使用该基于React的通用UI库，无需开发CSS(样式表)就可以快速高效的构建统一风格的网站页面和Web应用。
附图说明
图1是数据的变动决定渲染界面；
图2是按钮组件效果图；
图3是弹窗组件效果图；
图4是空状态组件效果图；
图5是图标组件效果图；
图6是加载中组件效果图；
图7是菜单组件效果图；
图8是通知组件效果图；
图9是分页组件效果图；
图10是进度条组件效果图；
图11是二维码组件效果图；
图12是选择器组件效果图；
图13是评分组件效果图；
图14是复选框组件效果图；
图15是表格组件效果图；
图16是标签组件效果图；
图17是提示组件效果图；
以下结合附图和实施例对本发明作进一步地详细说明。
具体实施方式
本发明的基于React的通用UI库，是一种新的业务、数据和渲染分离的开发结构。其构建方法包括：
1)创建两个单独的npm包，将业务代码js和样式代码css分享开，应用中所需的所有共通组件的业务代码和样式代码都在该两包中；
2)将组件所需的所有CSS样式文件都置于放置样式代码的npm包中。
3)将组件所需的所有定义文件都置于放置业务代码的包中。
4)各个js文件包使用typescript做为开发语言，使用强类型定义各个组件属性和状态。
5)业务代码将各个组件的数据模型(Model)、组件逻辑(Controller)、渲染实图(View)放置到不同的文件模块中。
所构建的基于React的通用UI库，包括：
1、按钮，组件效果如图2，该组件标签名为Button，类似于HTML原生的button；相比于原生button扩展的icon、theme、loading三个属性；icon属性可在按钮中自动显示中指定的图标，theme属性可以在不写CSS的情况下指定按钮的样式，loading属性表示当前按钮处于任务执行阶段；
其属性定义为：
export interface ButtonProps{
onClick？:MouseEventHandler<HTMLButtonElement>
className？:string
style？:CSSProperties
theme？:string
loading？:boolean
text:ReactText
disabled？:boolean
id？:string
}
2、弹窗，组件效果如图3，该组件标签名为Dialog，类似于原生的alert(提示框)，confirm(确认框)和prompt(输入框)的组合，该组件提供了在弹出层中显示内容的能力，并提供了类似Windows窗口的可拖动功能；使用该组件除了可以达到和使用原生alert，confirm和prompt一样的效果，比原生的弹窗在样式上更加贴合当前的网页风格。除了提示框，确认框输入框之外，该组件还支持拖动窗口、输入框输入多行文本、输入框输入密码、在弹窗中显示网页内容等多种功能。
其属性定义为：
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、空状态，组件效果如图4，该组件标签名为Tag，原生HTML无该组件，该组件被设计用来显示列表或表格没有数据时的提示信息；在表格组件或其他需要显示数据，但此时还没有数据时的提示信息，使用户可以一眼看出当前没有数据而并非是错误导致的没有显示；
其属性定义为：
export interface EmptyProps{
description？:ReactNode
icon？:ReactNode
}
4、图标，组件效果如图5，该组件标签名为Icon，原生HTML无该组件，该组件用来显示图标信息；弹窗组件的标题图标，按钮组件的加载图标都是使用的该组件；
其属性定义为：
Figure BDA0002959111940000121
5、加载中，组件效果如图6，该组件标签名为Loading，原生HTML无该组件，该组件可在数据加载时给用户以友好提示；如有时在请求异步数据的时候的时候可能由于网络等各种原因加载速度很慢，这时需要给用户以友好提示，让用户清楚的知道当前是在加载数据。当数据加载完成后显示数据，如果当前没有数据，显示空状态。
其属性定义为：
Figure BDA0002959111940000131
6、菜单，组件效果如图7，该组件标签名为Menu，标签名类似于原生标签menu，提供了原生菜单不具备的多级菜单支持、子元素支持等功能，且无需额外写CSS样式。有时在做管理系统时不可避免的需要用到菜单，使用该组件不需要写大量的代码，只需要简单的配置就可以显示下拉菜单或右键菜单。
其属性定义为：
Figure BDA0002959111940000132
7、通知，组件效果如图8，该组件无显式标签，通过Notifications类的静态方法调用，可在浏览器右上角、右下角、左上角、左下角或中心位置显示可操作的通知条。在做管理系统时不可避免的需要实时更新一些数据，比如即时消息，数据状态变化等，使用该组件可以在屏幕中弹出一个提示框以告知用户数据的变化。
其属性定义为：
Figure BDA0002959111940000133
Figure BDA0002959111940000141
8、分页，组件效果如图9，该组件的标签名为Pager，原生HTML无该标签，该组件提供了分页显示以及跳转能力。使用该组件无需复杂的计算，只需要数据总数量，页码，页大小就可以生成一个可点击的分页条；表格组件中的分页也是使用的该组件。
其属性定义为：
Figure BDA0002959111940000142
9、进度条，组件效果如图10，该组件的标签名为Progress，原生HTML无该标签，该组件提供了显示耗时操作进度信息的能力。在上传文件或加载数据的时候使用该组件可以让用户清楚的知道当前上传或加载的进度信息。
其属性定义为：
Figure BDA0002959111940000143
10、二维码，组件效果如图11，该组件标签名为QrCode，原生HTML无该标签，该组件提供了显示二维码的能力。在当今一切都可以扫码的时代，在Web应用或网页中显示二维码是必要且急需的功能。使用该组件只需要提示文本内容和图标就可以生成一个带图标的二维码，而无需编写其他代码。
其属性定义为：
Figure BDA0002959111940000151
11、选择器，组件效果如图12，该组件的标签名为Select，类似于原生标签select，提供了原生标签不具备的搜索、动态加载和多选能力。原生select标签只能选择固定的内容，该组件不只可以选择固定内容，也可以在下拉后让用户输入内容进行本地或远程搜索，大大提高的选择的效率，且该组件支持多选，可以同时选择多个选择。
其属性定义为：
Figure BDA0002959111940000152
12、评分组件，组件效果如图13，该组件标签名为Stars，原生HTML无该标签，该组件提供了一组可点选的元素以用做评分，且可灵活定义要显示的星星内容和个数。该组件主要用于服务评分、订单评价等需要用户打分的地方。
其属性定义为：
Figure BDA0002959111940000153
Figure BDA0002959111940000161
13、轮播图，该组件的标签名为Swiper，原生HTML无该标签，该组件提供了一种用于展示轮播内容的容器，开发者使用该组件可直接生成轮播图或轮播可交互内容。对于内容展示型网站来说，在首页轮播展示网站的主体内容可以更加醒目的让用户看到网站想要表达的内容。
其属性定义为：
Figure BDA0002959111940000162
14、复选框，组件效果如图14，该组件标签名为SwitchBox，类似于原生HTML的<input type＝”checkbox”/>，提供了原生标签不具备的自定义样式功能和半选中功能。该组件除了提供和原生复选框一样的功能外还在选中和取消时有转场动画。其半选中功能还可用于多级选择时在父级展示子级的全选和非全选情况。
其属性定义为：
Figure BDA0002959111940000163
15、表格，组件效果如图15，该组件标签名为Table，类似于原生HTML的table，提供了原生标签不具备的排序、筛选、分页、拖动等能力。原生table标签需要写大量的tr，td标签且不能直接支持排序、搜索、分页、拖动等功能。该组件使用时无需手动写tr，td标签，只需把数据和数据和展示的映射关系传给该组件，组件内部会自动把数据渲染出来。
其属性定义为：
Figure BDA0002959111940000171
16、标签，组件效果如图16，该组件标签名为Tag，原生HTML无该标签，该组件提供了醒目展示少量信息的能力。同时选择框的多选展示也是使用的的该组件。
其属性定义为：
Figure BDA0002959111940000172
Figure BDA0002959111940000181
17、提示，组件效果如图17，该组件无显示标签，通过Toast类的静态方法调用，该组件提示了，在网页上方、中心、下方、右上、右下、左上、左下显示少量提示信息的能力。该组件可在用户提交信息成功或失败后在不改变页面结构的情况下给出提示。
其属性定义为：
Figure BDA0002959111940000182
18、网页浏览器，该组件的标签名为WebView，类似于原生HTML的iframe，提供了原生标签不具备的自定义网页window对象的能力。弹窗中的网页使用的就是该组件。
其属性定义为：
Figure BDA0002959111940000183
具体安装实例：
将本实施例给出的基于React的通用UI库进行安装，步骤如下：
步骤一：搭建开发环境
1、安装Node.js，到Node.js的官方网站https://nodejs.org/zh-cn下载Node.js长期支持版的安装包。
2、安装npm(NodepackageManager，Node包管理工具)，该命令在Node.js安装时会自动安装，无需手动安装。
3、安装代码编辑工具，代码编辑工具有SublimeText、Visual Studio Code、JetbrainsWebStorm、Notepad++等多种选择，本发明在实施时使用的是Visual StudioCode。
步骤二：初始化项目
1、新建项目目录，在项目目录下打开终端，输入npm init初始化项目。
2、使用npminstall命令安装项目所需的依赖包。
需要的依赖包有：构建工具webpack、构建工具命令行webpack-cli、构建工具开发服务器webpack-dev-server、基础依赖react、基础依赖react-dom、生成二维码工具qrcode、React编译依赖react-loader；
3、配置webpack以达到生成复用组件目的，新建webpack配置文件webpack.config.js。
webpack配置文件如下：
Figure BDA0002959111940000191
Figure BDA0002959111940000201
采用上述基于React的通用UI库，Web前端开发者无需开发CSS(样式表)就可以快速高效的构建统一风格的网站页面和Web应用。
3、组件使用方式示例：
Figure BDA0002959111940000202
Figure BDA0002959111940000211
Figure BDA0002959111940000221
Figure BDA0002959111940000231
Figure BDA0002959111940000241
Figure BDA0002959111940000251

Claims (1)

1.一种基于React的通用UI库，其特征在于，包括以下18种组件：
1)按钮，该组件标签名为Button，类似于HTML原生的button；相比于原生button扩展的icon、theme、loading三个属性；icon属性可在按钮中自动显示中指定的图标，theme属性可以在不写CSS的情况下指定按钮的样式，loading属性表示当前按钮处于任务执行阶段；
其属性定义为：
export interface ButtonProps{
onClick？:MouseEventHandler<HTMLButtonElement>
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无该组件，该组件用来显示图标信息；弹窗组件的标题图标，按钮组件的加载图标都是使用的该组件；
其属性定义为：
Figure FDA0002959111930000031
5)加载中，该组件标签名为Loading，原生HTML无该组件，该组件可在数据加载时给用户以友好提示；让用户清楚的知道当前是在加载数据；当数据加载完成后显示数据，如果当前没有数据，显示空状态；
其属性定义为：
Figure FDA0002959111930000041
6)菜单，该组件标签名为Menu，类似于原生标签menu，提供了原生菜单不具备的多级菜单支持、子元素支持等功能，且无需额外写CSS样式；有时在做管理系统时不可避免的需要用到菜单，使用该组件不需要写大量的代码，只需要简单的配置就可以显示下拉菜单或右键菜单；
其属性定义为：
Figure FDA0002959111930000042
7)通知，该组件无显式标签，通过Notifications类的静态方法调用，可在浏览器右上角、右下角、左上角、左下角或中心位置显示可操作的通知条；使用该组件可以在屏幕中弹出一个提示框以告知用户数据的变化；
其属性定义为：
Figure FDA0002959111930000043
Figure FDA0002959111930000051
8)分页，该组件的标签名为Pager，原生HTML无该标签，该组件提供了分页显示以及跳转能力，使用该组件无需复杂的计算，只需要数据总数量，页码，页大小就可以生成一个可点击的分页条；表格组件中的分页也是使用的该组件；
其属性定义为：
Figure FDA0002959111930000052
9)进度条，该组件的标签名为Progress，原生HTML无该标签，该组件提供了显示耗时操作进度信息的能力，在上传文件或加载数据的时候使用该组件可以让用户清楚的知道当前上传或加载的进度信息；
其属性定义为：
Figure FDA0002959111930000061
10)二维码，该组件标签名为QrCode，原生HTML无该标签，该组件提供了显示二维码的能力，使用该组件只需要提示文本内容和图标就可以生成一个带图标的二维码，而无需编写其他代码；
其属性定义为：
Figure FDA0002959111930000062
11)选择器，该组件的标签名为Select，类似于原生标签select，提供了原生标签不具备的搜索、动态加载和多选能力；原生select标签只能选择固定的内容，该组件可以选择固定内容，也可以在下拉后让用户输入内容进行本地或远程搜索，且该组件支持多选，可以同时选择多个选择；
其属性定义为：
Figure FDA0002959111930000071
12)评分组件，该组件标签名为Stars，原生HTML无该标签，该组件提供了一组可点选的元素以用做评分，且可灵活定义要显示的星星内容和个数；主要用于服务评分、订单评价等需要用户打分的地方；
其属性定义为：
Figure FDA0002959111930000072
13)轮播图，该组件的标签名为Swiper，原生HTML无该标签，该组件提供了一种用于展示轮播内容的容器，使用该组件可直接生成轮播图或轮播可交互内容；
其属性定义为：
Figure FDA0002959111930000081
14)复选框，该组件标签名为Checkbox，类似于原生HTML的<input type＝”checkbox”/>，提供了原生标签不具备的自定义样式功能和半选中功能；该组件除了提供和原生复选框一样的功能外还在选中和取消时有转场动画，其半选中功能还可用于多级选择时在父级展示子级的全选和非全选情况；
其属性定义为：
Figure FDA0002959111930000082
15)表格，该组件标签名为Table，类似于原生HTML的table，提供了原生标签不具备的排序、筛选、分页、拖动等能力；使用时无需手动写tr，td标签，只需把数据和数据和展示的映射关系传给该组件，组件内部会自动把数据渲染出来；
其属性定义为：
Figure FDA0002959111930000091
16)标签，该组件标签名为Tag，原生HTML无该标签，该组件提供了醒目展示少量信息的能力，同时选择框的多选展示也是使用的该组件；
其属性定义为：
Figure FDA0002959111930000101
17)提示，该组件无显示标签，通过Toast类的静态方法调用，该组件提示了，在网页上方、中心、下方、右上、右下、左上、左下显示少量提示信息的能力，可在用户提交信息成功或失败后在不改变页面结构的情况下给出提示；
其属性定义为：
Figure FDA0002959111930000102
18)网页浏览器，该组件的标签名为WebView，类似于原生HTML的iframe，提供了原生标签不具备的自定义网页window对象的能力，弹窗中的网页使用的就是该组件；
其属性定义为：
Figure FDA0002959111930000103
Figure FDA0002959111930000111
CN202110233671.2A 2021-03-03 2021-03-03 一种基于React的通用UI库 Pending CN113010156A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202110233671.2A CN113010156A (zh) 2021-03-03 2021-03-03 一种基于React的通用UI库

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202110233671.2A CN113010156A (zh) 2021-03-03 2021-03-03 一种基于React的通用UI库

Publications (1)

Publication Number Publication Date
CN113010156A true CN113010156A (zh) 2021-06-22

Family

ID=76403354

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202110233671.2A Pending CN113010156A (zh) 2021-03-03 2021-03-03 一种基于React的通用UI库

Country Status (1)

Country Link
CN (1) CN113010156A (zh)

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20040148576A1 (en) * 2003-01-24 2004-07-29 Matveyenko Wade A. Remote web site editing in a standard web browser without external software
US6973625B1 (en) * 2001-07-06 2005-12-06 Convergys Cmg Utah Method for creating browser-based user interface applications using a framework
CN106293777A (zh) * 2016-10-31 2017-01-04 山东鲁能软件技术有限公司 一种基于组件式开发前端界面控件实现方法
CN108197257A (zh) * 2017-12-29 2018-06-22 深圳乐信软件技术有限公司 Html页面生成方法、装置、设备及存储介质
CN109814858A (zh) * 2018-12-20 2019-05-28 广东建采网科技有限公司 基于Vue架构的WEB前端通用UI组件库

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US6973625B1 (en) * 2001-07-06 2005-12-06 Convergys Cmg Utah Method for creating browser-based user interface applications using a framework
US20040148576A1 (en) * 2003-01-24 2004-07-29 Matveyenko Wade A. Remote web site editing in a standard web browser without external software
CN106293777A (zh) * 2016-10-31 2017-01-04 山东鲁能软件技术有限公司 一种基于组件式开发前端界面控件实现方法
CN108197257A (zh) * 2017-12-29 2018-06-22 深圳乐信软件技术有限公司 Html页面生成方法、装置、设备及存储介质
CN109814858A (zh) * 2018-12-20 2019-05-28 广东建采网科技有限公司 基于Vue架构的WEB前端通用UI组件库

Non-Patent Citations (2)

* Cited by examiner, † Cited by third party
Title
ANT DESIGN: "Ant Design of React 3.26.19", pages: 1 - 33 *
ELEMENT: "《https://element.eleme.cn/2.14/#/zh-CN/component/changelog》", 11 November 2020, pages: 1 - 6 *

Similar Documents

Publication Publication Date Title
Hermes Xamarin mobile application development: Cross-platform c# and xamarin. forms fundamentals
KR100953806B1 (ko) 어플리케이션 및 사용자에게 공지되는 사용자 인터페이스엘리먼트들을 형성하기 위한 시스템 및 방법
US6188401B1 (en) Script-based user interface implementation defining components using a text markup language
US7788599B2 (en) User interface elements for hierarchical selection of items
Reid jQuery Mobile
US20120297324A1 (en) Navigation Control Availability
US20050216834A1 (en) Method, apparatus, and computer-readable medium for dynamically rendering a user interface menu
US7216303B2 (en) Menu emulation for content browser clients
US20190065442A1 (en) Snapping content header in scrolled document
CN102999336A (zh) 应用界面实现方法和系统
Travis et al. Designing low‐cost mobile websites for libraries
CN111679818A (zh) 编辑展示软件的方法和系统
Bouillon et al. Recovering Alternative Presentation Models of a Web Page with V AQUITA
CN105511737A (zh) 一种管理网页上的菜单选项的方法及电子设备
US8438539B2 (en) Using a menu slideshow framework for generating a custom menu-driven slideshow containing definable content
CN113010156A (zh) 一种基于React的通用UI库
US11922110B2 (en) Responsive document authoring
Morris Hands-On Android UI Development: Design and develop attractive user interfaces for Android applications
Khaddam et al. Flippable user interfaces for internationalization
Precord wxPython 2.8
Van der Westhuizen Bootstrap for ASP. NET MVC
KR102644170B1 (ko) 화면 구성 요소에 대한 선택과 좌표 정보 수집을 지원하는 방법
Precord WxPython application development cookbook
Mawlood-Yunis User Interface Essential Classes, Layouts, Styles, Themes, and Dimensions
KR20230165506A (ko) 위젯을 편집하기 위한 방법 및 전자 장치

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
WD01 Invention patent application deemed withdrawn after publication

Application publication date: 20210622

WD01 Invention patent application deemed withdrawn after publication