[發(fā)明專利]一種基于React的通用UI庫(kù)

在審

• 申請(qǐng)?zhí)枺?/td>: 202110233671.2
• 申請(qǐng)日: 2021-03-03
• 公開(kāi)（公告）號(hào): CN113010156A
• 公開(kāi)（公告）日: 2021-06-22
• 發(fā)明（設(shè)計(jì)）人: 王燕妮;翟會(huì)杰
• 申請(qǐng)（專利權(quán)）人: 西安建筑科技大學(xué)
• 主分類號(hào): G06F8/30
• 分類號(hào): G06F8/30;G06F8/38
• 代理公司: 西安恒泰知識(shí)產(chǎn)權(quán)代理事務(wù)所 61216
• 代理人: 李鄭建

本發(fā)明公開(kāi)了一種基于React的通用UI庫(kù)，包括按鈕、彈窗、空狀態(tài)、圖標(biāo)、加載中、菜單、通知、分頁(yè)、進(jìn)度、二維碼、選擇器、評(píng)分組件、輪播圖、復(fù)選框、表格、標(biāo)簽、提示、網(wǎng)頁(yè)瀏覽器18種組件，Web前端開(kāi)發(fā)者使用該通用UI庫(kù)，無(wú)需開(kāi)發(fā)CSS(樣式表)就可以快速高效的構(gòu)建統(tǒng)一風(fēng)格的網(wǎng)站頁(yè)面和Web應(yīng)用。

技術(shù)領(lǐng)域

本發(fā)明屬于Web前端開(kāi)發(fā)技術(shù)領(lǐng)域，涉及前端組件業(yè)務(wù)和樣式分離，數(shù)據(jù)驅(qū)動(dòng)界面的開(kāi)發(fā)方式，特別是一種基于React的通用UI庫(kù)。

背景技術(shù)

一個(gè)網(wǎng)頁(yè)頁(yè)面通常由HTML(超文本標(biāo)記語(yǔ)言，Hyper Text Markup Language)代碼、CSS(層疊樣式表，Cascading Style Sheets)代碼和JS(腳本代碼，JavaScript)代碼三個(gè)部分組成。為了便于開(kāi)發(fā)，往往將一個(gè)網(wǎng)頁(yè)劃分為多個(gè)JS模塊，每個(gè)JS模塊均由HTML代碼、CSS代碼和JS代碼三個(gè)部分組成。開(kāi)發(fā)人員以JS代碼作為單個(gè)模塊的入口，HTML代碼片段和CSS代碼片段則作為該JS模塊的一個(gè)或多個(gè)UI(用戶界面，User Interface)模塊被所引入。開(kāi)發(fā)人員開(kāi)發(fā)JS模塊的過(guò)程中，不得不在JS代碼工作棧和UI模塊工作棧之間切換，導(dǎo)致開(kāi)發(fā)效率低。而業(yè)務(wù)影響數(shù)據(jù)，數(shù)據(jù)的變動(dòng)決定渲染界面(圖1)，因此，使開(kāi)發(fā)者可以抽離應(yīng)用共通元素形成組件，而提高多項(xiàng)目開(kāi)發(fā)效率是申請(qǐng)人研究的課題之一。

發(fā)明內(nèi)容

為了解決在多個(gè)工作棧之間切換導(dǎo)到效率低下的技術(shù)問(wèn)題，本發(fā)明的目的在于，提供一種基于React的通用UI庫(kù)。

為了實(shí)現(xiàn)上述任務(wù)，本發(fā)明采取如下的技術(shù)解決方案：

一種基于React的通用UI庫(kù)，其特征在于，包括以下18種組件：

1)按鈕，該組件標(biāo)簽名為Button，類似于HTML原生的button；相比于原生button擴(kuò)展的icon、theme、loading三個(gè)屬性；icon屬性可在按鈕中自動(dòng)顯示中指定的圖標(biāo)，theme屬性可以在不寫CSS的情況下指定按鈕的樣式，loading屬性表示當(dāng)前按鈕處于任務(wù)執(zhí)行階段；

其屬性定義為：

export interface ButtonProps{

onClick？:MouseEventHandlerHTMLButtonElement

className？:string

style？:CSSProperties

theme？:string

loading？:boolean

text:ReactText

disabled？:boolean

id？:string

}

2)彈窗，該組件標(biāo)簽名為Dialog，類似于原生的提示框，確認(rèn)框和輸入框的組合，該組件提供了在彈出層中顯示內(nèi)容的能力，并提供了類似Windows窗口的可拖動(dòng)功能；使用該組件除了可以達(dá)到和使用原生提示框，確認(rèn)框和輸入框一樣的效果，比原生的彈窗在樣式上更加貼合當(dāng)前的網(wǎng)頁(yè)風(fēng)格；除了提示框、確認(rèn)框和輸入框之外，該組件還支持拖動(dòng)窗口、輸入框輸入多行文本、輸入框輸入密碼、在彈窗中顯示網(wǎng)頁(yè)內(nèi)容等多種功能；

其屬性定義為：

export interface IDialogOption{

maximize？:boolean

maximizable？:boolean

doubleClickTitle2Max？:boolean