Bootstrap Blazor 組件介紹
項(xiàng)目介紹
演示系統(tǒng)地址：https://www.blazor.zone
Blazor 是一個(gè)使用 .NET 生成交互式客戶端 Web UI 的框架：
- 使用 C# 代替 JavaScript 來創(chuàng)建豐富的交互式 UI。
- 共享使用 .NET 編寫的服務(wù)器端和客戶端應(yīng)用邏輯。
- 將 UI 呈現(xiàn)為 HTML 和 CSS，以支持眾多瀏覽器，其中包括移動(dòng)瀏覽器。
使用 .NET 進(jìn)行客戶端 Web 開發(fā)可提供以下優(yōu)勢(shì)：
- 使用 C# 代替 JavaScript 來編寫代碼。
- 利用現(xiàn)有的 .NET 庫生態(tài)系統(tǒng)。
- 在服務(wù)器和客戶端之間共享應(yīng)用邏輯。
- 受益于 .NET 的性能、可靠性和安全性。
- 始終高效支持 Windows、Linux 和 macOS 上的 Visual Studio。
- 以一組穩(wěn)定、功能豐富且易用的通用語言、框架和工具為基礎(chǔ)來進(jìn)行生成。
本項(xiàng)目是利用 Bootstrap 樣式進(jìn)行封裝的 UI 組件庫，本項(xiàng)目托管在Gitee上
項(xiàng)目地址： 傳送門
演示系統(tǒng)地址：https://www.blazor.zone
該組件庫現(xiàn)階段一共包含組件71個(gè)，歡迎各位提出issue 傳送門，提出bug、增加功能以及增加更多的組件，更加方便各位在項(xiàng)目中的使用，同時(shí)issue也是查找問題的好地方，在這你也許能遇到與你有相同困惑的小伙伴，說不定已經(jīng)提出解決方案；
| 序號(hào) | 類別 | 組件 | 描述 |
| 1 | 布局 | Divider 分割線 | 區(qū)隔內(nèi)容的分割線 |
| 2 | Layout 布局 | 用于布局的容器組件，方便快速搭建頁面的基本結(jié)構(gòu) | |
| 3 | Footer 頁腳組件 | 顯示在網(wǎng)頁的最下方，提供返回頂端按鈕 | |
| 4 | Scroll 滾動(dòng)條 | 給高度或者寬度超標(biāo)的組件增加滾動(dòng)條 | |
| 5 | Skeleton 骨架屏 | 在需要等待加載內(nèi)容的位置提供一個(gè)占位圖形組合 | |
| 6 | Split 面板分割 | Split 面板分割 | |
| 7 | 導(dǎo)航 | Breadcrumb 面包屑 | 顯示當(dāng)前頁面的路徑，快速返回之前的任意頁面 |
| 8 | Menu 導(dǎo)航菜單 | 為頁面和功能提供導(dǎo)航的菜單列表 | |
| 9 | Nav 導(dǎo)航組件 | 為網(wǎng)站提供導(dǎo)航功能的菜單 | |
| 10 | Dropdown 下拉菜單 | 將動(dòng)作或菜單折疊到下拉菜單中 | |
| 11 | GoTop 返回頂端組件 | 點(diǎn)擊后返回指定容器的頂端 | |
| 12 | Pagination 分頁 | 當(dāng)數(shù)據(jù)量過多時(shí)，使用分頁分解數(shù)據(jù) | |
| 13 | Steps 步驟條 | 引導(dǎo)用戶按照流程完成任務(wù)的導(dǎo)航條 | |
| 14 | Tabs 標(biāo)簽頁 | 分隔內(nèi)容上有關(guān)聯(lián)但屬于不同類別的數(shù)據(jù)集合。 | |
| 15 | 表單 | EditorForm 表單組件 | 通過綁定數(shù)據(jù)模型自動(dòng)呈現(xiàn)編輯表單 |
| 16 | ValidateForm 表單組件 | 可供數(shù)據(jù)合規(guī)檢查的表單組件 | |
| 17 | AutoComplete 自動(dòng)完成 | 輸入框自動(dòng)完成功能 | |
| 18 | Button 按鈕 | 常用的操作按鈕 | |
| 19 | Checkbox 多選框 | 一組備選項(xiàng)中進(jìn)行多選 | |
| 20 | CheckboxList 多選框組 | 控件用于創(chuàng)建多選的復(fù)選框組 | |
| 21 | DatePicker 日期選擇器 | 用于選擇或輸入日期 | |
| 22 | DateTimeRange 日期時(shí)間段選擇器 | 在同一個(gè)選擇器里選擇一段日期 | |
| 23 | DropdownList 下拉框 | 當(dāng)選項(xiàng)過多時(shí)，使用下拉菜單展示并選擇內(nèi)容（建議使用Select組件） | |
| 24 | Editor 富文本框 | 將輸入的文字轉(zhuǎn)化為 html 代碼片段 | |
| 25 | Input 輸入框 | 通過鼠標(biāo)或鍵盤輸入字符 | |
| 26 | InputNumber 組件 | 僅允許輸入標(biāo)準(zhǔn)的數(shù)字值，支持自定義范圍及其他高級(jí)功能 | |
| 27 | Markdown 編輯器 | 提供 Markdown 語法支持的文本編輯器 | |
| 28 | Radio 單選框 | 在一組備選項(xiàng)中進(jìn)行單選 | |
| 29 | Rate 評(píng)分 | 評(píng)分組件 | |
| 30 | Select 選擇器 | 當(dāng)選項(xiàng)過多時(shí)，使用下拉菜單展示并選擇內(nèi)容 | |
| 31 | MultiSelect 多項(xiàng)選擇器 | 當(dāng)進(jìn)行多項(xiàng)選項(xiàng)時(shí)，使用下拉菜單展示并提供搜索多項(xiàng)選擇內(nèi)容 | |
| 32 | Slider 滑塊 | 通過拖動(dòng)滑塊在一個(gè)固定區(qū)間內(nèi)進(jìn)行選擇 | |
| 33 | Switch 開關(guān) | 提供最普通的開關(guān)應(yīng)用 | |
| 34 | Textarea 多行文本框 | 用于錄入大量文字 | |
| 35 | Toggle 開關(guān) | 提供最普通的開關(guān)應(yīng)用，值為 true false | |
| 36 | Transfer 穿梭框 | - | |
| 37 | Upload 上傳 | 通過點(diǎn)擊或者拖拽上傳文件 | |
| 38 | 數(shù)據(jù) | Avatar 頭像 | 用圖標(biāo)、圖片或者字符的形式展示用戶或事物信息 |
| 39 | Badge 徽章組件 | 出現(xiàn)在按鈕、圖標(biāo)旁的數(shù)字或狀態(tài)標(biāo)記 | |
| 40 | Card 卡片 | 將信息聚合在卡片容器中展示 | |
| 41 | Calendar 日歷框 | 按照日歷形式展示數(shù)據(jù)的容器。當(dāng)數(shù)據(jù)是日期或按照日期劃分時(shí)，例如日程、課表、價(jià)格日歷等，農(nóng)歷等。目前支持年/月切換 | |
| 42 | Captchas 滑塊驗(yàn)證碼 | 通過拖動(dòng)滑塊進(jìn)行人機(jī)識(shí)別 | |
| 43 | Carousel 走馬燈 | 在有限空間內(nèi)，循環(huán)播放同一類型的圖片、文字等內(nèi)容 | |
| 44 | Chart 圖表 | 通過給定數(shù)據(jù)，繪畫各種圖表的組件 | |
| 45 | Circle 進(jìn)度環(huán) | 圖表類組件。一般有兩種用途：
|
|
| 46 | Collapse 折疊面板 | 通過折疊面板收納內(nèi)容區(qū)域 | |
| 47 | ListView 列表視圖 | 提供規(guī)則排列控件 | |
| 48 | Popover 彈出窗組件 | 點(diǎn)擊/鼠標(biāo)移入元素，彈出氣泡式的卡片浮層 | |
| 49 | QRCode 二維碼 | 用于二維碼生成 | |
| 50 | Search 搜索框 | 用于數(shù)據(jù)搜索 | |
| 51 | Table 表格 | 用于展示多條結(jié)構(gòu)類似的數(shù)據(jù)，可對(duì)數(shù)據(jù)進(jìn)行排序、篩選、對(duì)比或其他自定義操作，內(nèi)置超多功能，滿足你各種應(yīng)用場景 | |
| 52 | Tag 標(biāo)簽 | 用于標(biāo)記和選擇 | |
| 53 | Timeline 時(shí)間線 | 可視化地呈現(xiàn)時(shí)間流信息 | |
| 54 | Tooltip 提示工具條 | 提供鼠標(biāo)懸停或者獲得焦點(diǎn)后顯示提示框 | |
| 55 | Tree 樹形控件 | 用清晰的層級(jí)結(jié)構(gòu)展示信息，可展開或折疊 | |
| 56 | BarcodeReader 條碼掃描 | 本組件通過調(diào)用攝像頭對(duì)條碼進(jìn)行掃描，獲取到條碼內(nèi)容條碼/QR碼 | |
| 57 | Camera 攝像頭拍照組件 | 本組件通過調(diào)用攝像頭進(jìn)行拍照操作 | |
| 58 | Handwritten 手寫簽名 | 桌面瀏覽器測(cè)試請(qǐng)用F12模擬為觸摸設(shè)備 | |
| 59 | 消息 | Alert 警告 | 用于頁面中展示重要的提示信息 |
| 60 | Console 控制臺(tái) | 控制臺(tái)組件，一般用于后臺(tái)任務(wù)的輸出 | |
| 61 | Dialog 對(duì)話框組件 | 通過注入服務(wù)調(diào)用 Show 方法彈出窗口進(jìn)行人機(jī)交互 | |
| 62 | Drawer 抽屜 | 呼出一個(gè)臨時(shí)的側(cè)邊欄, 可以從多個(gè)方向呼出 | |
| 63 | Message 消息提示 | 常用于主動(dòng)操作后的反饋提示。與 Toast 的區(qū)別是后者更多用于系統(tǒng)級(jí)通知的被動(dòng)提醒 | |
| 64 | Modal 模態(tài)框 | 在保留當(dāng)前頁面狀態(tài)的情況下，告知用戶并承載相關(guān)操作 | |
| 65 | Light 指示燈 | 提供各種狀態(tài)的指示燈 | |
| 66 | Popconfirm 氣泡確認(rèn)框 | 點(diǎn)擊元素，彈出氣泡確認(rèn)框 | |
| 67 | Progress 進(jìn)度條 | 用于展示操作進(jìn)度，告知用戶當(dāng)前狀態(tài)和預(yù)期 | |
| 68 | Spinner 旋轉(zhuǎn)圖標(biāo) | 加載數(shù)據(jù)時(shí)顯示動(dòng)效 | |
| 69 | SweetAlert 彈窗組件 | 模態(tài)對(duì)話框，多用于動(dòng)作過程中進(jìn)行詢問后繼續(xù)，或者顯示執(zhí)行結(jié)果 | |
| 70 | Toast 輕量彈窗 | 提供輕量級(jí) Toast 彈窗 | |
| 71 | Timer 計(jì)時(shí)器 | 用于時(shí)間倒計(jì)時(shí) |
以上是該組件庫現(xiàn)階段所有組件的基本介紹。歡迎各位大佬使用。
寫在最后
希望大佬們看到這篇文章，能給項(xiàng)目點(diǎn)個(gè)star支持下，感謝各位！
star流程：
1、訪問點(diǎn)擊項(xiàng)目鏈接：BootstrapBlazor;
2、點(diǎn)擊star，如下圖，即可完成star，關(guān)注項(xiàng)目不迷路：
另外還有兩個(gè)GVP項(xiàng)目，大佬們方便的話也點(diǎn)下star唄，非常感謝：
BootstrapAdmin 項(xiàng)目地址：
https://gitee.com/LongbowEnterprise/BootstrapAdmin
SliderCaptcha 項(xiàng)目地址：
https://gitee.com/LongbowEnterprise/SliderCaptcha
交流群（QQ）
BootstrapAdmin & Blazor（795206915）歡迎加群討論。
本文來自博客園，作者：一事冇誠，轉(zhuǎn)載請(qǐng)注明原文鏈接：http://www.rzrgm.cn/ysmc/p/16121137.html
浙公網(wǎng)安備 33010602011771號(hào)