项目介绍

演示系统地址: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 进度环 图表类组件。一般有两种用途:
  1. 显示某项任务进度的百分比
  2. 统计某些指标的占比。
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 组件库介绍的更多相关文章

  1. BootstrapBlazor 组件库使用体验---Table篇

    原文地址:https://www.cnblogs.com/ysmc/p/13323242.html Blazor 是一个使用 .NET 生成交互式客户端 Web UI 的框架: 使用 C# 代替 Ja ...

  2. iOS学习笔记9 - 组件库介绍1

    总算成功开发完了第一个较大的功能(即时通信).毕竟不可能什么东西都从轮子开始造,于是用到了一些组件,这里简单列举一下吧. 1. FMDB 作为一种文件型的数据存储方式,SQLite在iOS开发中自然也 ...

  3. Vitepress搭建组件库文档(上)—— 基本配置

    在 vite 出现以前,vuepress 是搭建组件库文档不错的工具,支持以 Markdown 方式编写文档.伴随着 vite 的发展,vitepress 已经到了 1.0.0-alpha.22 版本 ...

  4. Ant Design Blazor 组件库的路由复用多标签页介绍

    最近,在 Ant Design Blazor 组件库中实现多标签页组件的呼声日益高涨.于是,我利用周末时间,结合 Blazor 内置路由组件实现了基于 Tabs 组件的 ReuseTabs 组件. 前 ...

  5. Blazor组件提交全记录: FullScreen 全屏按钮/全屏服务 (BootstrapBlazor - Bootstrap 风格的 Blazor UI 组件库)

    Blazor 简介 Blazor 是一个使用 .NET 生成的交互式客户端 Web UI 的框架.和前端同学所熟知的 Vue.React.Angular 有巨大差异. 其最大的特色是使用 C# 代码( ...

  6. Blazor Bootstrap 组件库语音组件介绍

    Speech 语音识别与合成 通过麦克风语音采集转换为文字(STT),或者通过文字通过语音朗读出来(TTS) 本组件依赖于 BootstrapBlazor.AzureSpeech,使用本组件时需要引用 ...

  7. Blazor Bootstrap 组件库地理定位/移动距离追踪组件介绍

    地理定位/移动距离追踪组件 通过浏览器 API 获取定位信息 DEMO https://www.blazor.zone/geolocations 小提示 注意: 出于安全考虑,当网页请求获取用户位置信 ...

  8. Blazor Bootstrap 组件库浏览器通知组件介绍

    通知组件 通过浏览器API发送通知信息 , 桌面浏览器表现为右下角系统提示框弹出消息, 移动浏览器表现为弹窗或者到消息列表, blazor页面不在前台也可以通过本组件提醒用户. DEMO https: ...

  9. Blazor Bootstrap 组件库 Toast 轻量弹窗组件介绍

    轻量级 Toast 弹窗 DEMO https://www.blazor.zone/toasts 基础用法: 用户操作时,右下角给予适当的提示信息 <ToastBox class="d ...

随机推荐

  1. [Luogu P2014]选课 (树形DP)

    题面 传送门:https://www.luogu.org/problemnew/show/P2014 Solution 这是一道十分经典的树形DP题,这种类型的树形DP有一种很普遍的解法. 首先,观察 ...

  2. 你说一下对Java中的volatile的理解吧

    前言 volatile相关的知识其实自己一直都是有掌握的,能大概讲出一些知识,例如:它可以保证可见性:禁止指令重排.这两个特性张口就来,但要再往深了问,具体是如何实现这两个特性的,以及在什么场景下使用 ...

  3. 简单red5+obs推流实现直播系统开发,具体设置介绍

    前言:随便搞搞,先放一张效果图,

  4. Flink基础:实时处理管道与ETL

    ​ 往期推荐: Flink基础:入门介绍 Flink基础:DataStream API Flink深入浅出:资源管理 Flink深入浅出:部署模式 Flink深入浅出:内存模型 Flink深入浅出:J ...

  5. JavaScript ES 模块:现代化前端编程必备技能

    自从 ES 模块被添加到规范中后,JavaScript 中的模块就更加简单了.模块按文件分开,异步加载.导出是用 export 关键字定义的:值可以用 import 关键字导入. 虽然导入和导出单个值 ...

  6. 面试题:能谈谈Date、Datetime、Time、Timestamp、year的区别吗?

    一. 推荐阅读 首发地址:https://mp.weixin.qq.com/s/9zKX86P4kzlKla6-NyS3EA 使用推荐阅读,有更好的阅读体验 二.准备 如果面试官问你:了解 date. ...

  7. 两个SQL查询,横向合并为一个查询结果

    第一条sql: select unit,count(*)as number from archives_management group by unit 第二条sql: select fine_uni ...

  8. Linux系统下用户如何膝盖FTP用户密码

    其实修改ftp用户密码与修改普通用户的密码的过程是一眼高的其具体步骤如下 1.用root账户登录系统 2.使用passwd命令修改密码: 第一次输入密码后提示:The password fails t ...

  9. GitLab集成Jenkins、Harborn构建pipeline流水线任务

    一.计划 在jenkins中构建流水线任务时,从GitLab当中拉取代码,通过maven打包,然后构建dokcer镜像,并将镜像推送至harbor当中.Jenkins中含开发.测试.生产视图,开发人员 ...

  10. Spring源码之Bean生命周期

    https://www.jianshu.com/p/1dec08d290c1 https://www.cnblogs.com/zrtqsk/p/3735273.html 总结 将class文件加载成B ...