开源 一套 Blazor Server 端精致套件

Blazor 作为一种 Web 开发的新技术已经发展有一段时间了,有些人标称 无 JS 无 TS,我觉得有点误导新人的意味,也有人文章大肆宣传 Blazor 是 JavaScript 的终结者,是为了替代 JavaScript 而生的,我认为这些言论都太激进了太片面了。我对 Blazor 的理解是:

它仅仅是为开发人员开发 Web 应用是多了一种选择,多了一条路而已,使用 Blazor 组件可以远离 Javascript 与 css,开发 Blazor 组件还是不能彻底抛弃 Javascript 与 css

本人在码云开源了一个 后台通用权限管理平台 BootstrapAdmin -,一直想把这个平台实现一个 SPA 的版本,随着 Blazor 的兴起,我个人想尝试使用 Blazor Server 端方式实现,由于一直比较喜欢 Eleme UI 的风格,于是在网上找了一下能满足需要的组件,要么是不好看,要么功能不全,比如 Table 组件展示一下数据可以,但是做到增删改查还差的很远很远。作为一个代码洁癖的人最不能接受是代码拿下来编译一下,几百个警告信息,眼泪立马流了下来。刚好 4 月份时间比较空闲,觉得利用一个月的时间自己写一套组件,由于出发点是想给 后台通用权限管理平台 BootstrapAdmin 使用,所以就叫了 BootstrapBlazor 这个名字。经过一个月时间的打磨,本套组件库已经基本完成,从简单的 button 组件到复杂的具备增删改查功能的 table 组件都可以正常使用了,虽然名字叫做 BootstrapBlazor,其实很多组件都是借鉴的 Eleme UI 跟 Ant Design 的,基本上组件都是自己手写 css 样式进行细致调整的。

Table 组件介绍

Table 组件是一个非常核心的组件,做好 Table 组件才能有核心竞争力,所以本人做了一个最强 Table 功能,一个 Table 组件完成一个单表维护,详情请看最后一个功能。

功能

  • 默认样式无边框

  • 斑马纹表格

  • 边框表格

  • 自带选择列表格

  • 强类型数据绑定

  • 分页表格

  • 自带 Toolbar 表格

  • 自带查询表格

  • 固定表头表格

  • 具备单表维护能力的表格

UI

通过上图可以看到 Table 头部左侧我放置了常用的操作按钮,负责 增加、删除、编辑 ;头部右侧放置了 搜索、刷新 等操作按钮;Table 内行也提供了 删除、编辑 快捷按钮;Table 底部是 分页 明细数据;组件采用前后端分离设计,开发人员只负责对数据的过滤操作即可。由于篇幅所限不做过多描述,各种功能请移步 演示地址 进行体验。

现将本套组件开源,诚心邀请各位大佬前来围观,并且帮忙点个 star

Gitee   地址为:https://gitee.com/LongbowEnterprise/BootstrapBlazor
Github 地址为:https://github.com/ArgoZhang/BootstrapBlazor

演示地址

http://blazor.sdgxgz.com/tables

非常期待 5 月 19 号的 Blazor wasm 正式版,由于之前一直不是正式版,所以本套组件也没有支持,等正式版出来后第一时间兼容 wasm 版

友情链接:

Ant.Design Blazor: http://github.com/ant-design-blazor/ant-design-blazor 演示地址: http://ant-design-blazor.gitee.io

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/310173.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[Java基础]函数式接口

代码如下: package MyInterfacePack01;FunctionalInterface public interface MyInterface {void show(); }package MyInterfacePack01;public class MyInterfaceDemo {public static void main(String[] args){MyInterface my ()->System.out.println("hello world&q…

从零搭建分布式文件系统MinIO比FastDFS要更合适

前两天跟大家分享了一篇关于如何利用FastDFS组件来自建分布式文件系统的文章,有兴趣的朋友可以阅读下《用asp.net core结合fastdfs打造分布式文件存储系统》。通过留言发现大家虽然感兴趣,但是都觉得部署比较麻烦。的确,fastdfs的部署很繁琐&…

[Java基础]方法引用

代码如下: package PrintablePack;public interface Printable {void printString(String s);}package PrintablePack;public class PrintableDemo {public static void main(String[] args){usePrintable(s-> System.out.println(s));usePrintable(System.out::println);/…

甲方爸爸,大概你要的是代码生成器吧?

作者:邹溪源,长沙资深互联网从业者,架构师社区特邀嘉宾!一1)有一天,我的朋友Y童鞋分享了他正在做的一个内部开源项目,这个开源项目从外表上看,跟目前市场上那些代码生成器本没有特别…

使用pdf.js来预览pdf文件_适用于Dynamics365与PowerApps的注释预览组件

powerapps/dynamics365适用的注释预览/批量下载组件自定义组件为预览功能原生预览支持的文件类型:图像,zip,音频,pdf支持批量打包注释为zip下载到本地使用浏览器预览支持:音频,视频,图像,pdf,文本,xml,json等,理论上只需要浏览器支持打开的文件类型,均可预览使用方法:1.导入解决…

消息队列,我只选RabbitMQ!

高并发架构是架构师的必修课,而消息队列,则是王冠上最闪亮的那颗明珠!能否驾驭消息队列这款高并发神器,亦成为架构师的试金石。作为专注.NET领域十多年的老架构师,下面从队列本质、技术选型、实战应用三个方面&#xf…

python比较三个数_python经典练习题(三)

人生苦短,你需要python继续学习python第一题题目:输入三个整数 x,y,z,请把这三个数由小到大输出不借助sortnum1 int(input("请输入第一个数"))num2 int(input("请输入第二个数"))num3 int(input("请输入第三个数&qu…

使用Jexus 容器化您的 Blazor 应用程序

在本文中,我们将介绍如何将 Blazor 应用程序放入Jexus 容器以进行开发和部署。我们将使用 .NET Core CLI,因此无论平台如何,使用的命令都将是相同的。Blazor 托管模型Blazor 有两个托管模型,它们的要求不同,本文主要基…

【A】 Natasha3.0 引擎亮给你,请你来折腾

文章转载授权级别:A一 、 引言Natasha 距离上个 2. 版本大概有1个月了,在4月份里我把模板与引擎进行了重构,旨在更抽象、规范、合理,方便其他人参与开源、定制。接下来我将从 引擎的结构 、类库的使用及新热的 Source Generators …

linux ps mysql_linux系统中ps指令使用详解

在linux系统作为和unix和ubuntu相同的系统,ps指令经常被用到查看程序进程的状态,但是这个指令具体怎么用您会吗?本文就以centos为例,结合项目中服务器的实际应用,给大家讲解下ps指令的用法。一、参数a——显示现行终端…

ASP.NET Core在CentOS上的最小化部署实践

引言本文从Linux小白的视角, 在CentOS服务器上搭建一个Nginx-Powered AspNet Core Web准生产应用。在开始之前,我们还是重温一下部署原理,正如你所常见的.Net Core 部署图:在Linux上部署.Net Core App最好的方式是使用Kestrel 服务…

面试官:你不懂六大设计原则,回去等通知吧!

一、前言不知道大家是否有这样的体会,就是在学习设计模式的时候,看了很多书籍,也照着很多示例把每个模式挨个敲了几遍,但过了一段时间后,就会忘了一大半。或者有的朋友尝试在业务编码中使用,却越用越复杂&a…

Asp.Net Core Filter 深入浅出的那些事-AOP

一、前言在分享ASP.NET Core Filter 使用之前,先来谈谈AOP,什么是AOP 呢?AOP全称Aspect Oriented Programming意为面向切面编程,也叫做面向方法编程,是通过预编译方式和运行期动态代理的方式实现不修改源代码的情况下给程序动态统…

C++函数模板和普通函数的调用规则

C函数模板和普通函数的调用规则: 普通函数可以进行自动类型转换。 函数模板必须严格类型匹配。 C编译器优先考虑普通函数。 如果函数模板可以产生一个更好的匹配,那么选择模板。 可以通过空模板实参列表的语法限定编译器只能通过模板匹配。 代码如下&#xff…

.NET Core技术研究-通过Roslyn代码分析技术规范提升代码质量

随着团队越来越多,越来越大,需求更迭越来越快,每天提交的代码变更由原先的2位数,暴涨到3位数,每天几百次代码Check In,补丁提交,大量的代码审查消耗了大量的资源投入。如何确保提交代码的质量和…

python最大堆heapq_Python-堆的实现与heapq(最小堆库函数)

目录简介堆是一个二叉树&#xff0c;它的每个父节点的值都只会小于或大于所有孩子节点(的值)。它使用了数组来实现&#xff1a;从零开始计数&#xff0c;对于所有的 k &#xff0c;都有 heap[k] < heap[2*k1] 和 heap[k] < heap[2*k2]。 为了便于比较&#xff0c;不存在的…

深入浅出 ASP.NET Core 与 Docker 入门课程说明

点击蓝字“角落的白板报”关注我哟加个“星标★”&#xff0c;好文必达&#xff01;深入浅出 ASP.NET Core 与 Docker 入门课程说明《深入浅出 ASP.NET Core 与 Docker 》是一门新的课程&#xff0c;本课程所有的内容全部免费&#xff0c;以图文配合视频的形式呈现。课程完整视…

微软将在新西兰建设其第一个数据中心区域

昨天新西兰各IT群都被一条消息刷屏了&#xff1a;详情可见&#xff1a;https://news.microsoft.com/en-nz/2020/05/06/aotearoa-disclosure/NZ的第一个Azure region region 是云计算的一个术语&#xff0c;也就是各大云运营商机房部署的位置。目前微软、亚马逊、谷歌等比较大的…

使用 kind 快速搭建一个 Kubernetes 测试环境

使用 kind 快速搭建一个 Kubernetes 测试环境Introkind&#xff08;Kubernetes IN Docker&#xff09; 是一个基于 docker 构建 Kubernetes 集群的工具&#xff0c;非常适合用来在本地搭建基于 Kubernetes 的开发/测试环境。想写一篇 kind 的文章很久了&#xff0c;但是之前的 …

麻雀虽小,五脏俱全

入职三年&#xff0c; 除了参与公司核心产品研发外&#xff0c;另外负责了一个2C的小项目&#xff1a;调用API拿到解析结果 & 计费。❝项目最初是.NetCore 1.0-Previewsqlite部署在IIS上&#xff0c;闲来没事&#xff0c;这个项目已经被我完全重写&#xff0c;在此记录一些…