前言 今天大姚给大家分享一个由微软官方开源(MIT License)、免费的Blazor UI组件库:Fluent UI Blazor。...全面的ASP.NET Core Blazor简介和快速入门 Fluent UI Blazor介绍 Fluent UI Blazor是一个基于Blazor的组件库,提供了一系列的UI组件以及Fluent...UI的设计系统。...Blazor是一个使用 .NET框架和C#编程语言Razor语法构建Web应用程序的UI框架,它可以用于构建单页应用(SPA)和 Web服务,它使用编译的C#来操纵HTML DOM来替代JavaScript...项目源代码 部分UI组件截图 在线使用文档:https://www.fluentui-blazor.net Checkbox InputFile Number field Radio Date &
前言 本文主要是推荐一些开源、免费、实用、美观的Blazor UI组件库,提供给广大C#/.NET开发者们学习和使用(注意:排名不分先后,都是十分优秀的开源框架和项目)。...开箱即用的高质量 Blazor 组件,可在多种托管方式共享。 支持基于 WebAssembly 的前端和基于 SignalR 的服务端 UI 即时交互。.../microsoft/fluentui-blazor 项目介绍 Microsoft Fluent UI Blazor是一个基于Blazor的组件库,提供了一系列的UI组件以及Fluent UI的设计系统...项目特点 丰富组件:包含Vuetify 1:1还原的基础组件,以及很多实用的预置组件和.Net深度集成功能,包括Url、面包屑、导航三联动,高级搜索,i18n等 UI设计语言:设计风格现代,UI 多端体验设计优秀...的 UI 组件库,BlazorStrap的组件也支持响应式布局、主题定制以及多语言支持等功能,可以帮助开发者快速搭建出美观、易用的 Web 应用程序。
之间共享UI,一处UI增加或者修改,就能得到一致的UI体验。...通过结合使用 .NET MAUI 和 Blazor,可以跨移动设备、桌面设备和 Web 重复使用一组 Web UI 组件。...今天就分享如何在Blazor Server、Blazor Wasm、MAUI Blazor之间共享UI的实验,这一步完成,后面开发应用时就方便多了(只针对UI修改)。 2....组件相关的代码、路由组件等放在这个工程,供其他项目引用 Dotnet9.Server:Blazor Server模板项目 Dotnet9.Wasm:Blazor WebAssembly项目 Dotnet9...UI共享。
虽然标记帮助器很有用,但仍存在一些编程缺陷,而 Blazor 组件则绝妙地消除了这些缺陷。在本文中,我将生成新的 Blazor 组件,以通过 Bootstrap 4 框架服务显示模式对话框。...在此过程中,我将处理 Blazor 模板化组件和级联参数。...Toggle 子组件仅用作触发器标记的容器。相反,Content 子组件包装整个对话框的内容,并拆分为三段:页眉、正文和页脚。 总之,根据上面的代码片段,生成的 UI 由标记为“打开”的主按钮组成。...{ get; set; } public bool AutoClose { get; set; } } CascadingValue 元素捕获所提供的表达式,并自动将它与所有显式绑定到它的最靠中心组件共享...如果不使用级联参数功能,必须在任何需要的位置显式注入复杂的分层组件中的任何共享值。
比较通用的 JavaScript 电子表格组件,可以轻松地使用、显示并通过数据绑定提供实时数据更新。...绿色 = 正 红色 = 负 创建 SpreadJS Blazor 组件 在将 SpreadJS 放入 Blazor 应用程序之前,我们必须首先创建一个 Blazor 组件来包含 SpreadJS。...想要创建组件,首先要创建一个 Razor 类库: 为简单起见,您可以将其命名为“SpreadJS_Blazor_Lib”: 创建项目后,我们需要将 SpreadJS 文件复制到“wwwroot”文件夹
创建一个Blazor TabControl组件,有两个目标知识点: Pass data into a RenderFragment to give it context....下面看最终效果图: 实操开始: 请先创建一个Blazor项目(Blazor Client或者Server皆可,我们以Blazor Server为例), 第一步,创建两个组件:TabControl和TabPage...TabPage组件有一个父TabControl属性引用(属性名Parent,添加CascadingParameter特性)。 TabControl组件: 文件路径:....ChildContent { get; set; } } TabPage组件: 文件路径:....原文作者:blazor university 原文链接:https://blazor-university.com/templating-components-with-renderfragements
本篇,我们来了解下在Blazor中数据是如何共享的,组件之间又该如何传递参数。 关于Blazor组件 在 Blazor 中,从名为“组件”的自包含代码部分生成 UI。...编译应用时,HTML 和代码将编译为组件类。组件一般被编写为扩展名为 .razor 的文件。 关于数据共享 Blazor 包含多种在组件之间共享信息的方法。...使用组件参数共享 在父组件和子组件的此层次结构中,可以使用组件参数在它们之间共享信息。在子组件上定义这些参数,然后在父组件中设置其值。...最终效果: 小结 本篇,我们了解了数据如何在Blazor中共享。 下一篇,我们学习一下在Blazor中数据绑定的各种花样。...参考资料 Microsoft Docs,《在Blazor应用程序中共享数据》 65号腕,《Blazor中的参数和级联参数》
Bootstrap Blazor 组件库 一套基于 Bootstrap 和 Blazor 的企业级组件库 项目介绍 Blazor 是一个使用 .NET 生成交互式客户端 Web UI 的框架: 使用 C...共享使用 .NET 编写的服务器端和客户端应用逻辑。 将 UI 呈现为 HTML 和 CSS,以支持众多浏览器,其中包括移动浏览器。...获取本项目代码 BootstrapBlazor 相关资源 Blazor 官方文档 生成 Blazor Web 应用 什么是 Blazor 练习 - 配置开发环境 Blazor 组件 练习 - 添加组件...数据绑定和事件 练习 - 数据绑定和事件 总结 视频教程 B 站视频集锦 传送门 组件 Blazor 应用基于组件。...Blazor 中的组件是指 UI 元素,例如页面、对话框或数据输入窗体。 组件是内置到 .NET 程序集的 .NET 类,用来: 定义灵活的 UI 呈现逻辑。 处理用户事件。 可以嵌套和重用。
上一篇(点击阅读)我们实现了UI在Web端(Blazor Server/Wasm)和客户端(Windows/macOS/Android/iOS)共享,这篇我加上 Masa Blazor[2]组件库的引用...前置知识 关于Masa Blazor请点击Masa Blazor官网[4]了解: MASA Blazor 基于Material Design和BlazorComponent的交互能力提供标准的基础组件库...组件库的引用 组件库的添加参考Masa官网[5],这里写下Dotnet9后台[6]添加记录: 2.1 UI共享库的修改-Dotnet9.WebApp UI共享库 Dotnet9.WebApp 添加Maas.Blazor...Maas.Blazor组件引用 添加文件....总结 Masa.Blazor组件库已经添加,并恢复了时间戳功能,下一步,就是继续搭建网站后台了,使用Masa.Blazor搭建框架喽。
简介 Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。...Element UI组件官方网址 Element UI标签 Container 布局容器 用于布局的容器组件,方便快速搭建页面的基本结构: :外层容器。
ngx-bootstrap 是一套Bootstrap 组件 官网:https://valor-software.com/ngx-bootstrap/#/ github: https://github.com.../valor-software/ngx-bootstrap NG-bootstrap bootstrap4组件 官网:https://ng-bootstrap.github.io/#/home NG-ZORRO...https://github.com/cipchk/ng-alain NGX-admin http://akveo.com/ngx-admin/#/pages/dashboard primeng 一个丰富的组件库
[C#] Blazor练习5 定时刷新组件数据 疫情被关在家,只能用小孩上网课的电脑再复习下。 @page "/" 定时刷新数据!
系列目录 【已更新最新开发文章,点击查看详细】 Blazor 是一个使用 .NET 生成交互式客户端 Web UI 的框架: 使用 C# 代替 JavaScript 来创建信息丰富的交互式 UI...共享使用 .NET 编写的服务器端和客户端应用逻辑。 将 UI 呈现为 HTML 和 CSS,以支持众多浏览器,其中包括移动浏览器。 与新式托管平台(如 Docker)集成。...1、Ant Design Blazor Ant Design Blazor是一套基于 Ant Design 和 Blazor 的企业级组件库。 特性 提炼自企业级中后台产品的交互语言和视觉风格。...开箱即用的高质量 Blazor 组件,可在多种托管方式共享。 支持基于 WebAssembly 的客户端和基于 SignalR 的服务端 UI 事件交互。...BootstrapBlazor 是一套基于 Bootstrap 和 Blazor 的企业级组件库,可以认为是 Bootstrap 项目的 Blazor 版实现。
文章目录 一、布局文件中设置 Button 组件属性 二、代码中修改 Button 组件属性 三、Button 点击事件 四、完整代码示例 五、执行结果 六、GitHub 地址 一、布局文件中设置 Button...组件属性 ---- Button 组件是在 UI 界面中的按钮组件 , 重要的用户交互接口 ; 布局文件中设置 Button : Button 组件在布局文件中的示例 : <?...: ohos:layout_alignment=“horizontal_center” , 上述配置标识组件水平居中 ; 背景设置属性 : ohos:background_element="#000000..." , 可以设置一个颜色值 ; 文本设置 : ohos:text=“你点啥” , 设置组件显示的文本为 “你点啥” ; 文本文字大小设置 : ohos:text_size=“150” 文本颜色设置 :...ohos:text_color="#00FF00" , 绿色 ; 二、代码中修改 Button 组件属性 ---- 代码中设置 Button 属性 : 获取组件 : 调用 findComponentById
文章目录 一、Text 组件 二、Module 准备 三、代码示例 四、GitHub 地址 一、Text 组件 ---- Text 组件是在 UI 界面中显示文本的组件 ; 1....布局文件中设置 Text : Text 组件在布局文件中的示例 : <?xml version="1.0" encoding="utf-8"?...match_content 和 match_parent 两个值 ; 宽度 : ohos:width=“match_content” 高度 : ohos:height=“match_content” 组件位置属性...: ohos:layout_alignment=“horizontal_center” , 上述配置标识组件水平居中 ; 背景设置属性 : ohos:background_element="$graphic...:background_ability_main" , 可以设置一个颜色值 ; 文本设置 : ohos:text=“Hello World” , 设置组件显示的文本为 Hello World ; 文本文字大小设置
现在Blazor Webassembly微软正式把组件带到前端,让我们看看它是怎么玩的。 第一个组件 废话不多说下面开始构建第一个组件。...html,style用来控制ui表现层,code用来封装逻辑。...注意:Blazor目前没有样式隔离技术,所以写在组件内的style有可能会影响其他html元素 使用组件 使用组件跟其他框架大体是相同的,直接在需要使用的地方使用以我们组件名作为一个html元素插入...里面有几个方法: BuildRenderTree 用来构建html,css等ui元素 其它code部分会也会被合并到这个类里面 生命周期 了解组件声明周期对我们使用组件有很大的帮助。...@key 当使用循环渲染组件的时候请在组件上使用@key来加速Blazor的diff算法。
指定基类 指定属性 导入组件 原始 HTML 官方文档原文位置: https://docs.microsoft.com/zh-cn/aspnet/core/blazor/components?...组件:项目 Blazor 中,使用 .razor 结尾的文件,称为组件;而 Blazor 中的组件,正式名称是 razor 组件; Blazor 组件是 razor 过渡而来的,使用 razor 的基本语法特性...两者区别在于页面有路由,可以直接通过 URI 访问,一般放在 Page 文件夹中;而组件,作为一个部件,必须嵌入其它组件中,在页面中显示,一般放到 Shared 文件夹中,供多个页面共享、复用。...在外部调用组件方法以更新状态 组件继承了 ComponentBase 类型,有个 InvokeAsync 方法可用于外界更新此 UI 的状态。...protected override void OnInitialized() { MyUIServer.AddEvent(UIEvent); } // 退出当前页面UI
里的基本图形,转化为UI组件。...设计理念是: 基于意图的设计 Intention-based design 设计师可以用草图的方式来进行UI设计,在这款工具里不需要搜索选择各种各样的UI组件,只需绘制简单的形状或文本,然后将它们神奇地转换为您要添加的...UI组件。..., 而此简化图形能够代表实际UI组件的感觉。...如果这是一款跳出sketch的产品, 值得我们思考的是, 如何把UI组件转化为用鼠标可以快速绘制出来的简化图形, 而此简化图形能够代表实际UI组件的感觉。
为了实现一个Web应用系统,需要有个看起来不丑的UI,而对于.NET程序员来说要做全栈开发还是有点难,而本篇介绍的这个UI组件库正好可以帮助我们解决这个问题!...MudBlaozr是啥 MudBlazor是一个基于Blazor的前端UI组件库,它可以使.NET开发者使用C#语言快速地构建酷炫的Web应用。...重点是,MudBlazor提供的UI组件真的还是蛮好看的,对于企业内部信息系统的开发绰绰有余,可以助力实现.NET开发者的全栈梦想。...(5)数据显示组件:头像、列表、卡片、分页、Tab、时间线等; (6)导航组件:链接、菜单、导航栏等; (7)互动组件:进度条、提示栏、消息框等; 这里我们着重来看看常见的Table UI效果...至此,MudBlazor组件库的安装配置工作就完成了,下一篇我们使用MudBlazor UI来重构之前的Todo应用。 小结 本篇,我们了解了MudBlazor这个强大的UI组件库。
背景: 今天和一个前端小伙伴沟通的时候就框架和组件的称呼居然不一致。 事情是这样的,我和小伙伴在沟通一些问题的时候,她将uview、antd等称之为框架,而我内心想这些不是组件吗?...这不就意味着react、vue、uni-app这样的才是框架,而我们在项目中引入的涉及UI的都是组件库中的部分组件,涉及函数功能的都是js库。...antd、element官网都是介绍自己为组件库,而uview称自己为UI框架,细想一下也是没问题的,因为他们还封装了功能相关的组件,比如表单、选择器、文件上传/下载,从某种意义上说,他们称自己为组件库...、UI库、UI框架都是没问题的。...框架原本就是对js的封装,浏览器最终执行的也是js代码,相当于就是在运行框架,而框架中又可以加入一些组件库(封装了UI),和js库(封装了函数)来减少我们的工作量。
领取专属 10元无门槛券
手把手带您无忧上云