Blazor第三方组件库推荐:BootstrapBlazor UI

这篇具有很好参考价值的文章主要介绍了Blazor第三方组件库推荐:BootstrapBlazor UI。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

Blazor是C#全栈追求极致开发速度的一个前后端不分离的框架,上限是在Winform,WPF,MAUI等宿主环境上面运行的全平台引用。和Electron一样,解决方案都是套壳浏览器。

为了追求极致的开发速度,Blazor急需Blazor版本的Element UI。但是我发现国内竟然有微软技术爱好者开发了这个UI框架,还是开源的。这也太厉害了吧。我对开源框架的开发者一直都是最崇高的敬意的。不说了,写完这个公司小项目就去打钱给作者。

资源

BootstrapBlazor 官方文档
BootstrapBlazor 项目模板
BoostrapBlazor 管理员和前台项目 BlazorAdmin

适合人群

  • 快速开发
    • 不需要写前后端
  • 安全开发
    • 浏览器只收到渲染结果,不怕API暴露
  • 敏捷迭代
    • 需求不确定,天天改需求。
  • C#全栈开发
    • 前端里面不用JS,TS,就用C#写逻辑
  • 小项目开发
    • 因为是服务器发送渲染结果的方法。对于服务器的网速和负载要求比较高
    • 网上说可以支持1000人同时在线。对于大部分小网站来说已经够用了。日活都不一定有1000.

如何开始

环境配置

  • .NET CORE 6.0 及以上
  • VS2022 以上
  • 安装BootstrapBlazor项目模板

Tips:BootstrapBlazor以下简称BB

BB导入到微软默认项目模板实在太过于麻烦。不如直接使用BB提供的项目模板

开始新项目

Blazor第三方组件库推荐:BootstrapBlazor UI,Blazor基础知识,ui

Server和Wasm的区别

简单来说

  • Server:前后端不分离
  • Wasm:前端项目

这里推荐使用Server

Blazor第三方组件库推荐:BootstrapBlazor UI,Blazor基础知识,ui

.NET CORE 不支持 7.0

可能是我自己的Bug。我的电脑上面安装了.NET Core7.0
Blazor第三方组件库推荐:BootstrapBlazor UI,Blazor基础知识,ui
Blazor第三方组件库推荐:BootstrapBlazor UI,Blazor基础知识,ui
Blazor第三方组件库推荐:BootstrapBlazor UI,Blazor基础知识,ui
Blazor第三方组件库推荐:BootstrapBlazor UI,Blazor基础知识,ui

运行结果

Blazor第三方组件库推荐:BootstrapBlazor UI,Blazor基础知识,ui

使用组件

我们在Counter页面添加元素
Blazor第三方组件库推荐:BootstrapBlazor UI,Blazor基础知识,ui

Blazor第三方组件库推荐:BootstrapBlazor UI,Blazor基础知识,ui

@page "/counter"
@attribute [TabItemOption(Text = "Counter")]
<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>


<!--这个BB提供的Button组件,特点是用墨绿色标出和首字母大写-->
<Button ButtonStyle="ButtonStyle.Round" Color="Color.Primary">主要按钮</Button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Blazor第三方组件库推荐:BootstrapBlazor UI,Blazor基础知识,ui

发布项目

Blazor第三方组件库推荐:BootstrapBlazor UI,Blazor基础知识,ui

Blazor第三方组件库推荐:BootstrapBlazor UI,Blazor基础知识,ui
Blazor第三方组件库推荐:BootstrapBlazor UI,Blazor基础知识,ui
Blazor第三方组件库推荐:BootstrapBlazor UI,Blazor基础知识,ui

Blazor第三方组件库推荐:BootstrapBlazor UI,Blazor基础知识,ui
Blazor第三方组件库推荐:BootstrapBlazor UI,Blazor基础知识,ui

配置到IIS里面

Blazor第三方组件库推荐:BootstrapBlazor UI,Blazor基础知识,ui

Blazor第三方组件库推荐:BootstrapBlazor UI,Blazor基础知识,ui

可以正常访问

Blazor第三方组件库推荐:BootstrapBlazor UI,Blazor基础知识,ui

样式问题

我们使用模板创建的文件里面没有自动引入全局样式。如何进行样式隔离请看微软官方文档。

Blazor CSS隔离

Blazor第三方组件库推荐:BootstrapBlazor UI,Blazor基础知识,ui
Blazor第三方组件库推荐:BootstrapBlazor UI,Blazor基础知识,ui
我们自己引入样式就可以了。文章来源地址https://www.toymoban.com/news/detail-624837.html

<link href="项目名.styles.css" rel="stylesheet" />

到了这里,关于Blazor第三方组件库推荐:BootstrapBlazor UI的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue第三方组件使用

    1、父组件与孩子组件传值 在孩子组件中定义props属性,里面定义好用于接收父亲数据的变量。 孩子组件是Movie Movie.vue。注意看在Movie组件里面有props对象中的title和rating属性用于父亲使用。 在父亲组件中使用孩子组件,使用时传入参数。 比如我在App.vue里面使用孩子组件时如

    2024年04月10日
    浏览(83)
  • 平板用的触控笔什么牌子好?ipad第三方电容笔推荐

    随着技术的发展,出现了各种各样的平板电容笔。一支好的电容笔,不但可以极大地提升我们的工作效率,还可以极大地提升我们的学习效果。平替的电容笔,无论是在技术方面,还是在质量方面,都还有很大的提升空间,至少在书写方面,不会比Apple Pencil差多少。下面就是

    2024年02月15日
    浏览(45)
  • 微信小程序--引用第三方组件

    引用方式分为两种 1、使用npm安装 【方便更新 推荐】 2、直接引用dist文件 按需加载组件库中的组件可以使用 3、lin-ui 组件库中的配置 1、安装nodejs环境 2、使用命令行初始化package json文件 打开小程序根目录 使用npm init初始化 3、安装第三方组件 init之后打开小程序会发现多了

    2024年02月08日
    浏览(75)
  • layui第三方组件cron的使用

    1. 首先上代码 下载资源: 1. cron生成组件(开源) 正常来说你只要下载 开源的cron组件,再下载layui,把我上面的html保存到layui文件夹同级目录,浏览器打开这个html,点击输入框的位置就可以正常使用,为避免无法使用,本文章也有嵌入资源可直接下载

    2024年02月12日
    浏览(49)
  • React Native第三方组件库汇总

    UI套件 1, NativeBase NativeBase 是一个广受欢迎的 UI 组件库,为 React Native 提供了数十个跨平台组件。在使用 NativeBase 时,你可以使用任意开箱即用的第三方原生库,而这个项目本身也拥有一个丰富的生态系统,从有用的入门套件到可定制的主题模板。 NativeBase 项目地址: https:/

    2024年04月28日
    浏览(37)
  • 微信小程序使用第三方ui组件库

    第三方的ui组件有很多,本篇文章主要介绍Vant Weapp。 https://vant-contrib.gitee.io/vant-weapp/#/quickstart 先在微信开发者工具终端通过命令安装vant weapp: 通过 npm 安装 npm i @vant/weapp -S --production 通过 yarn 安装 yarn add @vant/weapp --production 安装 0.x 版本 npm i vant-weapp -S --production 安装vant weap

    2024年02月12日
    浏览(61)
  • 第三方组件及计算属性传参的问题解决方式

    唉,好想玩滋嘣。 表格数据某一列需要用的计算属性时,模板中使用计算属性 fullName 就会直接调用 fullName 函数,而在模板中 fullName(item) 相当于 fullName()(item) ,此处为函数柯里化。 封装好的组件的事件回调函数想要传其它参数,事件的回调直接写 :before-upload=\\\"beforeUpload(\\\'a\\\')

    2024年02月05日
    浏览(56)
  • 小程序开发webview组件不跳转第三方网页的问题

    最近开发小程序,想要跳转第三方的网页,使用webview组件,src属性可以直接给到域名,然后进行跳转,但是这个组件对个人类型的小程序时不支持的,开发环境下,不校验合法域名的选项勾选后,是可以进行跳转的,包括真机调试也是没问题的,但是在生产环境上线后就不行

    2024年02月13日
    浏览(52)
  • 微信小程序使用第三方组件wxParse加载富文本html

    微信小程序 微信小程序加载富文本html 微信小程序富文本第三方组件wxParse wxParse 富文本html wxParse 是一个微信小程序富文本解析组件,支持支持Html及markdown转wxml。 wxParse gitHub地址:https://github.com/icindy/wxParse 目前项目已停止维护了,原因未知。 按照gitHub上的指,下载demo之后,

    2024年02月12日
    浏览(54)
  • Layui的第三方组件xm-select下拉控件默认值

    下面这种是xm-select里面data有值时动态取默认值 如果在你编写代码的时候使用的是远程查询 remoteMethod 来进行时

    2024年02月15日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包