Blazor 组件库 Blazui 开发第一弹【安装入门】
标签: Blazor Blazui文档 Blazui
Blazui 是什么?
Blazui 发布有段时间了,但一直没有写相关的文章,现在抽时间写点。
九个月前,我想用 Blazor 开发后台管理系统,找了一圈愣是没找着好用好看免费的 Blazor UI 框架,好几次被劝退,不想找了,但又想用 Blazor,所以萌生了自己写一个 Blazor 的 UI 框架的想法,这便是 Blazui。
但我并不想自己写 CSS,抄了 Element UI 的 CSS 和 HTML 结构,程序员的美工能奈何。
没选用 Bootstrap 的是因为它本身功能弱,如果我要搞一堆它本身没有的功能的话意味着 CSS 我要自己写
没选用 Antd 是因为它没有一个很好抄的现成的框架,很好抄的意思是指 HTML 结构清晰
目前 Blazui 只有服务端渲染,客户端渲染待微软出正式版
开源地址
开源地址:
https://github.com/wzxinchen/Blazui
https://gitee.com/wzxinchen/blazui
我要星星我要Fork
QQ交流群(新功能第一时间通知)
74522853
演示地址
安装 Blazui 到 Blazor 项目
使用前提
- 安装 .Net Core 3.1
- 安装 VS2019,更新到最新版
安装步骤
- 新建 Blazor 服务器端渲染应用
- 安装 Nuget 包 Blazui.Component
- 修改 Pages 文件夹下的 _Host.cshtml 为以下内容
@page "/"
@namespace Blazui.ServerRender.Pages //这里的 Blazui.ServerRender 需要变为你实际的命名空间
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Blazui, Element的blazor版本,用 .Net 写前端的 UI 框架,开箱即用</title>
<base href="~/" />
<link href="css/site.css" rel="stylesheet" />
<link rel="stylesheet" href="/_content/Blazui.Component/css/index.css" />
<link rel="stylesheet" href="/_content/Blazui.Component/css/fix.css" />
</head>
<body>
<app>
@(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
</app>
<script src="_content/Blazui.Component/js/dom.js"></script>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
其中
- index.css 文件是 Element 的样式文件
- dom.js 文件是 Blazui 自身需要的 js文件
- fix.css 文件是 Blazui 对 Element 补充的样式文件
在 _Imports.razor 文件中添加以下代码
@using Blazui.Component
将 Startup.cs 的 ConfigureServices 方法替换为以下代码
public void ConfigureServices(IServiceCollection services)
{
services.AddRazorPages();
services.AddHttpClient();
services.AddServerSideBlazor();
services.AddBlazuiServicesAsync().Wait();
services.AddSingleton<WeatherForecastService>();
}
为了使弹窗类组件生效,需要将 MainLayout.razor 的内容改为如下
@inherits LayoutComponentBase
<BPopup></BPopup>
<div class="sidebar">
<NavMenu />
</div>
<div class="main">
@Body
</div>
在任意一个页面输入以下代码,运行可看效果
<BButton Type="@ButtonType.Primary">主要按钮</BButton>
目前部分可用组件列表
个别用的少的不完善的没有加入
组件名 | 调用Demo | 功能支持 |
---|---|---|
按钮 | http://blazui.com:9000/button | [√] 常规支持 |
输入框 | http://blazui.com:9000/input | [√] 常规支持 |
单选框 | http://blazui.com:9000/radio | [√] 常规支持 [√] 按钮单选框 [√] 单选框组 [√] 按钮单选框组 [√] 带边框的单选框 |
复选框 | http://blazui.com:9000/checkbox | [√] 常规支持 [√] 按钮复选框 [√] 复选框组 [√] 按钮复选框组 |
下拉框 | http://blazui.com:9000/select | [√] 常规支持 [√] 选项可禁用 |
切换组件 | http://blazui.com:9000/switch | [√] 常规支持 [√] 自定义状态文本 |
菜单 | http://blazui.com:9000/menu | [√] 常规支持 [√] 横向菜单 [√] 坚向菜单 [√] 二级菜单 [√] 自定义背景色 [×] 多级菜单 |
标签页 | http://blazui.com:9000/tabs | [√] 常规支持 [√] 自定义选项卡样式 [√] 自定义卡片位置 [√] 可移除新增 |
表格 | http://blazui.com:9000/table | [√] 常规支持 [√] 自动生成列 [√] 斑马条纹 [√] 分页 [√] 自定义列内容 [√] 表头锁定 [√] 复选框列 [√] 表格边框 [√] 自适应宽度高度 |
消息 | http://blazui.com:9000/message | [√] 常规支持 [√] 四种消息类型 |
分页 | http://blazui.com:9000/pagination | [√] 常规支持 |
加载中 | http://blazui.com:9000/loading | [√] 常规支持 [√] 自定义背景颜色、图标、文字 [√] 全屏加载 [√] 部分加载 |
消息弹窗 | http://blazui.com:9000/messagebox | [√] 常规支持 [√] Alert弹窗 [√] Confirm 弹窗 [√] 无回调 |
对话框 | http://blazui.com:9000/dialog | [√] 常规支持 [√] 嵌套弹窗 [√] 指定宽度 [√] 无回调 |
日期选择器 | http://blazui.com:9000/datepicker | [√] 常规支持 [√] 指定日期格式 |
Form 表单 | http://blazui.com:9000/form | [√] 常规支持 [√] 三种对齐方式 [√] 单行表单 |
布局面板 | http://blazui.com:9000/layout | [√] 常规支持 [√] 嵌套布局 |
Blazor 组件库 Blazui 开发第一弹【安装入门】的更多相关文章
- Blazor 组件库开发指南
翻译自 Waqas Anwar 2021年5月21日的文章 <A Developer's Guide To Blazor Component Libraries> [1] Blazor 的 ...
- Ant Design Blazor 组件库的路由复用多标签页介绍
最近,在 Ant Design Blazor 组件库中实现多标签页组件的呼声日益高涨.于是,我利用周末时间,结合 Blazor 内置路由组件实现了基于 Tabs 组件的 ReuseTabs 组件. 前 ...
- Bootstrap Blazor 组件库 Row 布局组件(栅格系统)
原文链接:https://www.cnblogs.com/ysmc/p/16133351.html 在 Bootstrap 中,栅格相信大家都很熟悉,简直就是布局神器啊,Bootstrap Blazo ...
- Bootstrap Blazor 组件库
项目介绍 Blazor 是一个使用 .NET 生成交互式客户端 Web UI 的框架: 使用 C# 代替 JavaScript 来创建丰富的交互式 UI. 共享使用 .NET 编写的服务器端和客户端应 ...
- 微信小程序开发-第一弹
前言: 本篇文章为大家详细介绍微信小程序开发第一篇,后续步骤会逐步更新,欢迎大家关注. 第一步 注册 1.1 打开网址 https://mp.weixin.qq.com/ ...
- 基于react hooks,zarm组件库配置开发h5表单页面
最近使用React Hooks结合zarm组件库,基于js对象配置方式开发了大量的h5表单页面.大家都知道h5表单功能无非就是表单数据的收集,验证,提交,回显编辑,通常排列方式也是自上向下一行一列的方 ...
- STL函数库的应用第一弹——数据结构(队列)
队列是什么? 队列是一种特殊的线性表,特殊之处在于它只允许在表的前端进行删除操作,而在表的后端进行插入操作. 和栈一样,队列是一种操作受限制的线性表.进行插入操作的端称为队尾,进行删除操作的端称为队头 ...
- Blazor 组件库 BootstrapBlazor中 Ajax 组件的使用
组件解决的问题 由于Blazor在与服务器连接时使用了Websocket,仅在第一次连接时会走原MVC的连接逻辑.所以,我们无法在这个过程中完成例如身份认证.cookie处理等操作. 此组件即为解决此 ...
- 手机web页面开发-第一弹
毕业设计题目<基于three.js的太阳系全景漫游>,项目开发运行在手机端,开始学习手机端页面开发. 新建index.html,写meta标签.meta标签分为两大部分:http标题信息( ...
随机推荐
- SyntaxError: missing ] after element list
在前端页面js报错,找了很久没找到原因. 后来发现是后台向前端输出json字符串,而前端接收是html格式,需要将后台json字符串改成正常字符串就可以输出,或者通过ajax的方式接收json字符串.
- STL双端队列 deque
头文件:#include<deque> 构造方法: ①.创建一个没有任何元素的双端队列:deque<type> deq ②.用另一个类型相同双端队列初始化该双端队列:deque ...
- 解决修改 Linux 下的 PHP 环境变量不生效的方法
这个问题出现服务器有多个 PHP 版本,php -v和phpinfo()显示两个不同的版本 最近真的,都给朋友解决问题了... phpinfo查看的 php 版本是 7.2.6,到 bash 去使用p ...
- liunx 上无法kill 掉 redis服务
要新学习一下redis 的哨兵服务,但是发现启动redis的时候,哨兵服务已经存在了,而且reids6379的服务也杀不死,就找到这样的参考方案 /etc/init.d/redis-server st ...
- 使用iconv提示未知错误
使用iconv 转化编码的时候提示错误:<b>Notice</b>: iconv() [<a href='http://www.jinyuanbao.cn'>fun ...
- 2019牛客国庆集训派对day1(A, B E F K)
链接:https://ac.nowcoder.com/acm/contest/1099#question A:可知符合条件的图中间肯定存在一个由1构成的矩形,找到由1构成矩形的边界,判断出现的1的数量 ...
- linux 文件解压
解压 tar -xvf file.tar //解压 tar包 tar -xzvf file.tar.gz //解压tar.gz tar -xjvf file.tar.bz2 //解压 tar.bz ...
- luoguP1084 疫情控制(题解)(搜索+贪心)
luoguP1084 疫情控制 题目 #include<iostream> #include<cstdlib> #include<cstdio> #include& ...
- java虚拟机规范(se8)——class文件格式(七)
4.7.5 Exceptions 属性 Exceptions 属性是一个变长属性,它位于 method_info(§4.6)结构的属性表中. Exceptions 属性指出了一个方法需要检查的可能抛出 ...
- Matplotlib_key_point
Matplotlib官方入门教程: http://www.labri.fr/perso/nrougier/teaching/matplotlib/ 本文参考教程: http://codingpy.co ...