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 计时器 | 用于时间倒计时 |
未完待续......
BootstrapBlazor 组件库介绍的更多相关文章
- BootstrapBlazor 组件库使用体验---Table篇
原文地址:https://www.cnblogs.com/ysmc/p/13323242.html Blazor 是一个使用 .NET 生成交互式客户端 Web UI 的框架: 使用 C# 代替 Ja ...
- iOS学习笔记9 - 组件库介绍1
总算成功开发完了第一个较大的功能(即时通信).毕竟不可能什么东西都从轮子开始造,于是用到了一些组件,这里简单列举一下吧. 1. FMDB 作为一种文件型的数据存储方式,SQLite在iOS开发中自然也 ...
- Vitepress搭建组件库文档(上)—— 基本配置
在 vite 出现以前,vuepress 是搭建组件库文档不错的工具,支持以 Markdown 方式编写文档.伴随着 vite 的发展,vitepress 已经到了 1.0.0-alpha.22 版本 ...
- Ant Design Blazor 组件库的路由复用多标签页介绍
最近,在 Ant Design Blazor 组件库中实现多标签页组件的呼声日益高涨.于是,我利用周末时间,结合 Blazor 内置路由组件实现了基于 Tabs 组件的 ReuseTabs 组件. 前 ...
- Blazor组件提交全记录: FullScreen 全屏按钮/全屏服务 (BootstrapBlazor - Bootstrap 风格的 Blazor UI 组件库)
Blazor 简介 Blazor 是一个使用 .NET 生成的交互式客户端 Web UI 的框架.和前端同学所熟知的 Vue.React.Angular 有巨大差异. 其最大的特色是使用 C# 代码( ...
- Blazor Bootstrap 组件库语音组件介绍
Speech 语音识别与合成 通过麦克风语音采集转换为文字(STT),或者通过文字通过语音朗读出来(TTS) 本组件依赖于 BootstrapBlazor.AzureSpeech,使用本组件时需要引用 ...
- Blazor Bootstrap 组件库地理定位/移动距离追踪组件介绍
地理定位/移动距离追踪组件 通过浏览器 API 获取定位信息 DEMO https://www.blazor.zone/geolocations 小提示 注意: 出于安全考虑,当网页请求获取用户位置信 ...
- Blazor Bootstrap 组件库浏览器通知组件介绍
通知组件 通过浏览器API发送通知信息 , 桌面浏览器表现为右下角系统提示框弹出消息, 移动浏览器表现为弹窗或者到消息列表, blazor页面不在前台也可以通过本组件提醒用户. DEMO https: ...
- Blazor Bootstrap 组件库 Toast 轻量弹窗组件介绍
轻量级 Toast 弹窗 DEMO https://www.blazor.zone/toasts 基础用法: 用户操作时,右下角给予适当的提示信息 <ToastBox class="d ...
随机推荐
- mysql数据库——事务隔离级别
四种隔离级别: 一:READ UNCOMMITTED(未提交读) 事务可以读取其他事务未提交的数据,称为脏读 二:READ COMMITTED(提交读) 一个事务开始时,只能"看见" ...
- SpringBoot第四集:整合JdbcTemplate和JPA(2020最新最易懂)
SpringBoot第四集:整合JdbcTemplate和JPA(2020最新最易懂) 当前环境说明: Windows10_64 Maven3.x JDK1.8 MySQL5.6 SpringTool ...
- Python3网络学习案例一:Ping详解
1. 使用Ping做什么 ping用于确定本地主机是否能与另一台主机成功交换(发送与接收)数据包,再根据返回的信息,就可以推断TCP/IP参数是否设置正确,以及运行是否正常.网络是否通畅等. 2. 效 ...
- Java入门(6)
阅读书目:Java入门经典(第7版) 作者:罗格斯·卡登海德 当方法在子类和超类都定义了时,将使用子类的定义:因此子类可以修改,替换或完全删除超类的行为或属性. 关键字super引用对象的上一级超类, ...
- 【SpringCloud】07.应用间的通信
应用间通信 HTTP vs RPC Spring Cloud (HTTP) Dubbo (RPC) 1.SpringCloud中服务间两种restful调用方式 RestTemplate Feign ...
- SU模型叠加实景三维模型 用它就可以实现了
草图大师SketchUp是一套直接面向设计方案创作过程的设计软件,使用SketchUp规划设计师可以从潦草的平面草图开始,创建出想像的任何东西 .虽然市面软件众多,也不能取代SketchUp独有的位置 ...
- full nat
在餐馆吃饭时,连接无线网络后访问某网页会自动弹出一个认证页面,我想大家都经历过..... 其网络拓扑如下: sta-------------网络设备--------------公网 比如sta 终端i ...
- MySQL死锁问题(转)
线上某服务时不时报出如下异常(大约一天二十多次):"Deadlock found when trying to get lock;". Oh, My God! 是死锁问题.尽管报错 ...
- python实现二叉树递归遍历与非递归遍历
一.中序遍历 前中后序三种遍历方法对于左右结点的遍历顺序都是一样的(先左后右),唯一不同的就是根节点的出现位置.对于中序遍历来说,根结点的遍历位置在中间. 所以中序遍历的顺序:左中右 1.1 递归实现 ...
- 线程与更新UI,消除偏见,细谈原理
前言 相信不少读者都阅读过相类似的文章了,但是我还是想完整的把这之间的关系梳理清楚,细节聊好,希望你也能从中学到一些. 进入正题,大家应该都听过这样一句话--"UI更新要在主线程,子线程更新 ...