项目介绍

演示系统地址: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. python给图片打马赛克

    图片马赛克 关注公众号"轻松学编程"了解更多. 导包 import numpy as np import matplotlib.pyplot as plt %matplotlib ...

  2. CF1396E——Distance Matching

    传送门:QAQQAQ(题面翻译) 以后博客可能一直咕咕咕了.一些做题的思考可能会直接放在代码里而不是单独写博客,因为这样太浪费时间,只有一些比较新的题才会单独写博客 思路:对于这种构造可行解使得权值和 ...

  3. NodeJs 加入Windows开机自启动服务

    首先需要到http://nssm.cc/download/?page=download 下载 nssm,下下来之后是压缩包形式的解压之后,在命令行模式下进入到nssm的目录.之后运行:nssm ins ...

  4. Azure Data Factory(四)集成 Logic App 的邮件通知提醒

    一,引言 上一篇有介绍到使用Azure Data Factory 复制数据,然后有集成 Azure DevOps 实现CI/CD,但是对于真正的项目来说,这些肯定是不够的,比如说在执行 Azure P ...

  5. laravel 多表字段关联查询

    public function items() { return $this->belongsToMany('App\Model\Cz\CzCourse', 'cz_picture_course ...

  6. Python arange

    原文来自DeniuHe.原文链接 >>> np.arange(3) array([0, 1, 2]) >>> np.arange(1,3,0.3) array([ ...

  7. 性能工具-io工具

    I/O:某网上问题通过top  iotop pidstat vmstat 工具定位出io高原因,内存不够.

  8. #paragma详解

       #Pragma是预处理指令,它的作用是设定编译器的状态或者是指示编译器完成一些特定的动作.#Pragma指令对每个编译器给出了一个方法,在保持与C和C++语言完全兼容的情况下,给出主机或操作系统 ...

  9. Spring源码之AbstractApplicationContext中refresh方法注释

    https://blog.csdn.net/three_stand/article/details/80680004 refresh() prepareRefresh(beanFactory) 容器状 ...

  10. parted命令采用gpt分区过程

    Gpt无分区限制,故只有主分区,无扩展分区和逻辑分区.分区直接按容量算,不按柱面算. 查看分区:parted -l 将分区表类型转换为gpt.: 主要命令mklabel gpt 对sdc盘分区: [r ...