開源 一套 Blazor Server 端精緻套件
Blazor 作為一種 Web 開發的新技術已經發展有一段時間了,有些人標稱 無 JS 無 TS,我覺得有點誤導新人的意味,也有人文章大肆宣傳 Blazor 是 JavaScript 的終結者,是為了替代 JavaScript 而生的,我認為這些言論都太激進了太片面了。我對 Blazor 的理解是:
它僅僅是為開發人員開發 Web 應用是多了一種選擇,多了一條路而已,使用 Blazor 組件可以遠離 Javascript 與 css,開發 Blazor 組件還是不能徹底拋棄 Javascript 與 css
本人在碼雲開源了一個 後台通用許可權管理平台 BootstrapAdmin -,一直想把這個平台實現一個 SPA 的版本,隨著 Blazor 的興起,我個人想嘗試使用 Blazor Server 端方式實現,由於一直比較喜歡 Eleme UI 的風格,於是在網上找了一下能滿足需要的組件,要麼是不好看,要麼功能不全,比如 Table 組件展示一下數據可以,但是做到增刪改查還差的很遠很遠。作為一個程式碼潔癖的人最不能接受是程式碼拿下來編譯一下,幾百個警告資訊,眼淚立馬流了下來。剛好 4 月份時間比較空閑,覺得利用一個月的時間自己寫一套組件,由於出發點是想給 後台通用許可權管理平台 BootstrapAdmin 使用,所以就叫了 BootstrapBlazor 這個名字。經過一個月時間的打磨,本套組件庫已經基本完成,從簡單的 button
組件到複雜的具備增刪改查功能的 table
組件都可以正常使用了,雖然名字叫做 BootstrapBlazor,其實很多組件都是借鑒的 Eleme UI 跟 Ant Design 的,基本上組件都是自己手寫 css 樣式進行細緻調整的。
Table 組件介紹
Table 組件是一個非常核心的組件,做好 Table 組件才能有核心競爭力,所以本人做了一個最強 Table 功能,一個 Table 組件完成一個單表維護,詳情請看最後一個功能。
功能
- 默認樣式無邊框
- 斑馬紋表格
- 邊框表格
- 自帶選擇列表格
- 強類型數據綁定
- 分頁表格
- 自帶 Toolbar 表格
- 自帶查詢表格
- 固定表頭表格
- 具備單表維護能力的表格
UI
通過上圖可以看到 Table 頭部左側我放置了常用的操作按鈕,負責 增加、刪除、編輯 ;頭部右側放置了 搜索、刷新 等操作按鈕;Table 內行也提供了 刪除、編輯 快捷按鈕;Table 底部是 分頁 明細數據;組件採用前後端分離設計,開發人員只負責對數據的過濾操作即可。由於篇幅所限不做過多描述,各種功能請移步 演示地址 進行體驗。
現將本套組件開源,誠心邀請各位大佬前來圍觀,並且幫忙點個 star
Gitee 地址為://gitee.com/LongbowEnterprise/BootstrapBlazor
Github 地址為://github.com/ArgoZhang/BootstrapBlazor
演示地址
非常期待 5 月 19 號的 Blazor wasm 正式版,由於之前一直不是正式版,所以本套組件也沒有支援,等正式版出來後第一時間兼容 wasm 版
友情鏈接:
Ant.Design Blazor: //github.com/ant-design-blazor/ant-design-blazor 演示地址: //ant-design-blazor.gitee.io