BootstrapBlazor 組件庫介紹

BootstrapBlazor

原文鏈接：http://www.rzrgm.cn/ysmc/p/14076838.html

項目介紹

演示系統地址：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 計時器	用于時間倒計時