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流程：

1、訪問點擊專案鏈接：BootstrapBlazor;

2、點擊star，如下圖，即可完成star，關注專案不迷路：

另外還有兩個GVP專案，大佬們方便的話也點下star唄，非常感謝：

　　BootstrapAdmin 專案地址：
　　https://gitee.com/LongbowEnterprise/BootstrapAdmin

　　SliderCaptcha 專案地址：
　　https://gitee.com/LongbowEnterprise/SliderCaptcha

交流群（QQ）

BootstrapAdmin & Blazor（795206915）歡迎加群討論，

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/228680.html

標籤：.NET Core

上一篇：c#與kepsever服務器通訊異步讀寫變數時出現錯誤

下一篇：BootstrapBlazor 組件庫介紹