BootstrapBlazor 組件庫介紹

項目介紹

演示系統地址：https://www.blazor.zone

Blazor 是一個使用 .NET 生成交互式客戶端 Web UI 的框架：

• 使用 C# 代替 JavaScript 來建立豐富的交互式 UI。
• 共享使用 .NET 編寫的服務器端和客戶端應用邏輯。
• 將 UI 呈現爲 HTML 和 CSS，以支持衆多瀏覽器，其中包括移動瀏覽器。

使用 .NET 進行客戶端 Web 開發可提供如下優點：

• 使用 C# 代替 JavaScript 來編寫代碼。
• 利用現有的 .NET 庫生態系統。
• 在服務器和客戶端之間共享應用邏輯。
• 受益於 .NET 的性能、可靠性和安全性。
• 始終高效支持 Windows、Linux 和 macOS 上的 Visual Studio。
• 以一組穩定、功能豐富且易用的通用語言、框架和工具爲基礎來進行生成。

本項目是利用 Bootstrap 樣式進行封裝的 UI 組件庫，本項目託管在Gitee上，項目地址： 傳送門

演示系統地址：https://www.blazor.zone

　　該組件庫現階段一共包含組件71個，歡迎各位提出issue 傳送門，提出bug、增長功能以及增長更多的組件，更加方便各位在項目中的使用，同時issue也是查找問題的好地方，在這你也許能遇到與你有相同困惑的小夥伴，說不定已經提出解決方案；

 

序號	類別	組件	描述
1	佈局	Divider 分割線	區隔內容的分割線
2		Layout 佈局	用於佈局的容器組件，方便快速搭建頁面的基本結構
3		Footer 頁腳組件	顯示在網頁的最下方，提供返回頂端按鈕
4		Scroll 滾動條	給高度或者寬度超標的組件增長滾動條
5		Skeleton 骨架屏	在須要等待加載內容的位置提供一個佔位圖形組合
6		Split 面板分割	Split 面板分割
7	導航	Breadcrumb 麪包屑	顯示當前頁面的路徑，快速返回以前的任意頁面
8		Menu 導航菜單	爲頁面和功能提供導航的菜單列表
9		Nav 導航組件	爲網站提供導航功能的菜單
10		Dropdown 下拉菜單	將動做或菜單摺疊到下拉菜單中
11		GoTop 返回頂端組件	點擊後返回指定容器的頂端
12		Pagination 分頁	當數據量過多時，使用分頁分解數據
13		Steps 步驟條	引導用戶按照流程完成任務的導航條
14		Tabs 標籤頁	分隔內容上有關聯但屬於不一樣類別的數據集合。
15	表單	EditorForm 表單組件	經過綁定數據模型自動呈現編輯表單
16		ValidateForm 表單組件	可供數據合規檢查的表單組件
17		AutoComplete 自動完成	輸入框自動完成功能
18		Button 按鈕	經常使用的操做按鈕
19		Checkbox 多選框	一組備選項中進行多選
20		CheckboxList 多選框組	控件用於建立多選的複選框組
21		DatePicker 日期選擇器	用於選擇或輸入日期
22		DateTimeRange 日期時間段選擇器	在同一個選擇器裏選擇一段日期
23		DropdownList 下拉框	當選項過多時，使用下拉菜單展現並選擇內容（建議使用Select組件）
24		Editor 富文本框	將輸入的文字轉化爲 html 代碼片斷
25		Input 輸入框	經過鼠標或鍵盤輸入字符
26		InputNumber 組件	僅容許輸入標準的數字值，支持自定義範圍及其餘高級功能
27		Markdown 編輯器	提供 Markdown 語法支持的文本編輯器
28		Radio 單選框	在一組備選項中進行單選
29		Rate 評分	評分組件
30		Select 選擇器	當選項過多時，使用下拉菜單展現並選擇內容
31		MultiSelect 多項選擇器	當進行多項選項時，使用下拉菜單展現並提供搜索多項選擇內容
32		Slider 滑塊	經過拖動滑塊在一個固定區間內進行選擇
33		Switch 開關	提供最普通的開關應用
34		Textarea 多行文本框	用於錄入大量文字
35		Toggle 開關	提供最普通的開關應用，值爲 true false
36		Transfer 穿梭框	-
37		Upload 上傳	經過點擊或者拖拽上傳文件
38	數據	Avatar 頭像	用圖標、圖片或者字符的形式展現用戶或事物信息
39		Badge 徽章組件	出如今按鈕、圖標旁的數字或狀態標記
40		Card 卡片	將信息聚合在卡片容器中展現
41		Calendar 日曆框	按照日曆形式展現數據的容器。當數據是日期或按照日期劃分時，例如日程、課表、價格日曆等，農曆等。目前支持年/月切換
42		Captchas 滑塊驗證碼	經過拖動滑塊進行人機識別
43		Carousel 走馬燈	在有限空間內，循環播放同一類型的圖片、文字等內容
44		Chart 圖表	經過給定數據，繪畫各類圖表的組件
45		Circle 進度環	圖表類組件。通常有兩種用途： 顯示某項任務進度的百分比 統計某些指標的佔比。
46		Collapse 摺疊面板	經過摺疊面板收納內容區域
47		ListView 列表視圖	提供規則排列控件
48		Popover 彈出窗組件	點擊/鼠標移入元素，彈出氣泡式的卡片浮層
49		QRCode 二維碼	用於二維碼生成
50		Search 搜索框	用於數據搜索
51		Table 表格	用於展現多條結構相似的數據，可對數據進行排序、篩選、對比或其餘自定義操做，內置超多功能，知足你各類應用場景
52		Tag 標籤	用於標記和選擇
53		Timeline 時間線	可視化地呈現時間流信息
54		Tooltip 提示工具條	提供鼠標懸停或者得到焦點後顯示提示框
55		Tree 樹形控件	用清晰的層級結構展現信息，可展開或摺疊
56		BarcodeReader 條碼掃描	本組件經過調用攝像頭對條碼進行掃描，獲取到條碼內容條碼/QR碼
57		Camera 攝像頭拍照組件	本組件經過調用攝像頭進行拍照操做
58		Handwritten 手寫簽名	桌面瀏覽器測試請用F12模擬爲觸摸設備
59	消息	Alert 警告	用於頁面中展現重要的提示信息
60		Console 控制檯	控制檯組件，通常用於後臺任務的輸出
61		Dialog 對話框組件	經過注入服務調用 Show 方法彈出窗口進行人機交互
62		Drawer 抽屜	呼出一個臨時的側邊欄, 能夠從多個方向呼出
63		Message 消息提示	經常使用於主動操做後的反饋提示。與 Toast 的區別是後者更多用於系統級通知的被動提醒
64		Modal 模態框	在保留當前頁面狀態的狀況下，告知用戶並承載相關操做
65		Light 指示燈	提供各類狀態的指示燈
66		Popconfirm 氣泡確認框	點擊元素，彈出氣泡確認框
67		Progress 進度條	用於展現操做進度，告知用戶當前狀態和預期
68		Spinner 旋轉圖標	加載數據時顯示動效
69		SweetAlert 彈窗組件	模態對話框，多用於動做過程當中進行詢問後繼續，或者顯示執行結果
70		Toast 輕量彈窗	提供輕量級 Toast 彈窗
71		Timer 計時器	用於時間倒計時

以上是該組件庫現階段全部組件的基本介紹。歡迎各位大佬使用。

寫在最後

　　但願大佬們看到這篇文章，能給項目點個star支持下，感謝各位！

star流程：

一、訪問點擊項目連接：BootstrapBlazor;

二、點擊star，以下圖，便可完成star，關注項目不迷路：

三、另外還有兩個GVP項目，但願大佬們方便的話也點下star唄，很是感謝：

　　BootstrapAdmin 項目地址：
　　https://gitee.com/LongbowEnterprise/BootstrapAdmin

　　SliderCaptcha 項目地址：
　　https://gitee.com/LongbowEnterprise/SliderCaptcha

 

交流羣（QQ）

BootstrapAdmin & Blazor（795206915）歡迎加羣討論