Ant Design Blazor 組件庫的路由復(fù)用多標(biāo)簽頁功能
最近,在 Ant Design Blazor 組件庫中實(shí)現(xiàn)多標(biāo)簽頁組件的呼聲日益高漲。于是,我利用周末時(shí)間,結(jié)合 Blazor 內(nèi)置路由組件實(shí)現(xiàn)了基于 `Tabs` 組件的 `ReuseTabs` 組件。
最近,在 Ant Design Blazor 組件庫中實(shí)現(xiàn)多標(biāo)簽頁組件的呼聲日益高漲。于是,我利用周末時(shí)間,結(jié)合 Blazor 內(nèi)置路由組件實(shí)現(xiàn)了基于 Tabs
組件的 ReuseTabs
組件。
前言
Blazor 是 .NET 最新的前端框架,可以基于 WebAssembly 或 SignalR (WebSocket)構(gòu)建前端應(yīng)用程序,基于 WebAssembly 托管模型的 Blazor 甚至可以離線運(yùn)行。再加上可以共用 .NET 類庫,能使代碼量比以往的基于 JS 的前后端分離模型少 1/3。而且現(xiàn)在 .NET 開發(fā)者也可以使用自己熟悉的技術(shù)和經(jīng)驗(yàn)來開發(fā)前端應(yīng)用了,不同技術(shù)棧的開發(fā)人員之間的溝通成本也大大減少,從而再一次解放了生產(chǎn)力。
所以,Blazor 是 .NET 開發(fā)者的又一生產(chǎn)力技術(shù)!
通過使用 Blazor 社區(qū)生態(tài)開源的 UI 組件庫,常用的組件都被封裝了起來,用戶再也不需要寫 JS 和 CSS 了,使得 .NET 開發(fā)人員在社區(qū)里連連稱贊。目前,已經(jīng)有大量的基于 Blazor 構(gòu)建的企業(yè)級(jí)應(yīng)用程序被部署上線,逐漸被企業(yè)認(rèn)可。
正文
什么是路由復(fù)用多標(biāo)簽頁
本文標(biāo)題中的路由復(fù)用,是 Angular 的 RouteReuseStrategy
中的概念,在中文社區(qū)也常被稱作“多標(biāo)簽頁”,主要的功能是當(dāng)切換頁面時(shí),保持頁面的狀態(tài),并且可以通過任意切換頁面,當(dāng)前展示的頁面狀態(tài)能夠恢復(fù)。通常是被用在比較復(fù)雜的后臺(tái)管理系統(tǒng),用戶可以在篩選了表格后,進(jìn)入記錄的詳情頁,再回到列表頁后,仍然能保持原來的搜索條件、翻頁數(shù)等等;也或者是填寫表單時(shí),需要去別的頁面查看正確的信息,在回到表單時(shí),表達(dá)上已填過的內(nèi)容不會(huì)丟失。
而由于天然的能復(fù)用 C# 代碼的優(yōu)勢, Blazor 通常被用于構(gòu)建后臺(tái)管理系統(tǒng),所以使用標(biāo)簽頁就成為了普遍的需求。然鵝,Blazor 官方團(tuán)隊(duì)并沒有給我們直接提供這樣的組件,所以就需要社區(qū)的小伙伴來實(shí)現(xiàn)了。
但是縱觀社區(qū)中的幾個(gè)開源組件庫,都只是實(shí)現(xiàn)了通用的 Tabs 標(biāo)簽頁組件,只能當(dāng)作切換面板來使用。要用來實(shí)現(xiàn)“多標(biāo)簽頁”的功能,要么不支持,要么還得要直接或間接地依賴自己菜單組件和布局組件,再要依賴頁面文件路徑,拼接出頁面組件的類型,最后用反射來創(chuàng)建頁面組件……
雖然說它們確實(shí)實(shí)現(xiàn)了多標(biāo)簽頁的功能,但是實(shí)現(xiàn)方式不甚優(yōu)雅。耦合度非常高,只能在組件庫自己的框架布局中使用,而不能單獨(dú)拎出來使用。另外,反射的性能也不好,還要把頁面按照約定放置,對(duì)用戶種種制約。
當(dāng)然,社區(qū)中還流傳一個(gè)比較認(rèn)可的方案,就是 BlazorDemoMultiPagesTab
項(xiàng)目。它提供了一個(gè)原型,通過結(jié)合 Blazor 內(nèi)置的路由組件實(shí)現(xiàn)了路由多標(biāo)簽頁。但問題是它只是一個(gè) demo,只實(shí)現(xiàn)了原理,代碼比較凌亂,作者也沒有再做整理,也沒有封裝成組件,如果想在自己項(xiàng)目中使用起來,肯定會(huì)薅禿自己的頭發(fā)的。
Ant Design Blazor 中的 ReuseTabs 組件
最近,在 Ant Design Blazor 組件庫中實(shí)現(xiàn)多標(biāo)簽頁組件的呼聲日益高漲。于是,我利用周末時(shí)間,基于 BlazorDemoMultiPagesTab
中提供的思路,結(jié)合 Blazor 內(nèi)置路由組件實(shí)現(xiàn)了基于 Tabs
組件的 ReuseTabs
組件。
ReuseTabs
組件只包含兩個(gè)子組件,ReuseTabsRouteView
和 ReuseTabs
,其中 ReuseTabsRouteView
繼承自內(nèi)置的 RouteView
組件,負(fù)責(zé)接管頁面組件的生命周期,使頁面組件能夠保持狀態(tài)或被銷毀;ReuseTabs
負(fù)責(zé)標(biāo)簽的展示和交互。除此之外,沒有再依賴菜單、布局之類的其他組件,因此可以直接用于任何 Blazor 應(yīng)用程序,也可以很好地與其他組件庫一起使用。
主要的特點(diǎn)
- 只需修改兩處代碼即可應(yīng)用
- 支持靜態(tài)或動(dòng)態(tài)地設(shè)置標(biāo)簽名
- 與路由同步,支持
<a>
標(biāo)簽、NavigationManger
等各種方式的跳轉(zhuǎn)
下面介紹一下基礎(chǔ)的使用方法,以 dotnet new 模板項(xiàng)目為例。
使用方法
首先,按照 Ant Design Blazor 文檔中介紹的方式安裝 AntDesign 包和服務(wù)注冊(cè)。
然后,修改項(xiàng)目中的 App.razor
文件,把 RouteView
替換成 ReuseTabsRouteView
。
<Router AppAssembly="@typeof(Program).Assembly"> <Found Context="routeData"> - <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" / > + <ReuseTabsRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" /> </Found> ... </Router>
修改項(xiàng)目中的 MainLayout.razor
文件,
@inherits LayoutComponentBase <div class="page"> <div class="sidebar"> <NavMenu /> </div> <div class="main"> - <div class="top-row px-4"> - <a rel="external nofollow" target="_blank" class="ml-md-auto">About</a> - </div> - <div class="content px-4"> - @Body - </div> + <ReuseTabs Class="top-row px-4" TabPaneClass="content px-4" / > </div> </div>
兩種方式自定義標(biāo)簽名
如果是純文本,可以在頁面組件使用 ReuseTabsPageTitle
特性。
@page "/counter" + @attribute [ReuseTabsPageTitle("Counter")]
如果需要使用模板來獲取動(dòng)態(tài)的標(biāo)簽名,比如添加另一個(gè)組件,或者從頁面內(nèi)容中獲取標(biāo)題,需要實(shí)現(xiàn) IReuseTabsPage
接口:
@page "/" + @implements IReuseTabsPage <h1>Hello, world!</h1> @code{ + public RenderFragment GetPageTitle() => + @<div> + <Icon Type="home"/> Home + </div> + ; }
注意:當(dāng)前 ReuseTabs
組件在 0.9.0 版本的每日構(gòu)建包中,在正式發(fā)布之前,需要參考文檔中介紹的方式來安裝。
后續(xù)功能
目前該組件只實(shí)現(xiàn)了基本的功能,還有一些功能在后續(xù)的計(jì)劃當(dāng)中:
- 右鍵菜單
- 代碼方式關(guān)閉
- 緩存策略
- 路由守衛(wèi)與權(quán)限控制
后記
Blazor 社區(qū)中對(duì)多標(biāo)簽頁的呼聲有一年多了,這幾天終于實(shí)現(xiàn)了,國內(nèi)外的社區(qū)都一片歡騰,也是頗有成就感的。
對(duì)于實(shí)現(xiàn)的細(xì)節(jié),感興趣的同學(xué)可以到 Ant Design Blazor 的源碼中查看,也只是幾個(gè)文件。當(dāng)然,如果感興趣的同學(xué)比較多,我也可以寫一篇詳細(xì)的文章來介紹。
其實(shí)我是比較希望社區(qū)中能有更多的愛好者站出來,分享心得、貢獻(xiàn)開源項(xiàng)目,這樣才能讓社區(qū)健康發(fā)展起來。
Ant Design Blazor 發(fā)展至今已有一年有多,但是說實(shí)話相對(duì)于其他組件庫項(xiàng)目的作者,我自己的投入的時(shí)間和貢獻(xiàn)并沒有很多。其中除了貢獻(xiàn)代碼,一大部分精力都花在了社區(qū)的運(yùn)營。
為項(xiàng)目作宣傳,把路人變成用戶,再把用戶變成貢獻(xiàn)者,讓更多人各自花少量精力,達(dá)到眾人拾柴的效果,才是開源項(xiàng)目得以長期活躍的長久之計(jì)。
最后還是非常感激支持我們的用戶和貢獻(xiàn)者!他們的每個(gè) issue、案例和 PR 都是對(duì)我們的肯定,也是讓我們堅(jiān)持的動(dòng)力!
參考鏈接
https://github.com/BlazorPlus/BlazorDemoMultiPagesTab
https://github.com/ant-design-blazor/demo-reuse-tabs
https://antblazor.com/docs/nightly-build
到此這篇關(guān)于Ant Design Blazor 組件庫的路由復(fù)用多標(biāo)簽頁介紹的文章就介紹到這了,更多相關(guān)Ant Design Blazor 組件庫內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
javascript實(shí)現(xiàn)倒計(jì)時(shí)跳轉(zhuǎn)頁面
本文給大家介紹了如何使用javascript實(shí)現(xiàn)倒計(jì)時(shí)跳轉(zhuǎn)到其他頁面的方法以及實(shí)現(xiàn)原理,非常的簡單實(shí)用,有需要的小伙伴可以參考下。2016-01-01點(diǎn)擊按鈕出現(xiàn)60秒倒計(jì)時(shí)的簡單js代碼(推薦)
下面小編就為大家?guī)硪黄c(diǎn)擊按鈕出現(xiàn)60秒倒計(jì)時(shí)的簡單js代碼(推薦)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06Javascript基于OOP實(shí)實(shí)現(xiàn)探測器功能代碼實(shí)例
這篇文章主要介紹了Javascript基于OOP實(shí)實(shí)現(xiàn)探測器功能代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-08-08bootstrap校驗(yàn)laydate起止日期聯(lián)動(dòng)失效問題及解決方法
這篇文章主要介紹了bootstrap校驗(yàn)laydate起止日期聯(lián)動(dòng)失效問題,項(xiàng)目中用到bootstrapValidator,以及l(fā)aydate(by:賢心,插件效果美觀),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01Javascript訪問html頁面的控件的方法詳細(xì)分析
這段時(shí)間在公司比較的空閑,決定研究研究javascript訪問html控件,這是很普遍的,這里我系統(tǒng)的研究javascript的訪問方式,測試通過并有下面一些研究成就,供大家分享和補(bǔ)充。2008-08-08JavaScript使用Blob文件流下載txt、pdf、圖片等文件,自定義下載文件名
JavaScript使用Blob文件流下載txt、pdf、圖片等格式文件,同時(shí)自定義下載文件名,2023-08-08