AntDesignBlazor示例——创建项目

原创 已于 2023-12-09 09:26:18 修改 · 1.2k 阅读 · 10 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#Blazor #AntDesign

于 2023-12-05 19:04:07 首次发布
本文详细介绍了如何在VS2022的.NET8环境中，通过AntDesignBlazor创建新项目，安装组件，添加按钮并进行测试。步骤包括设置开发环境、安装AntDesign、配置文件和实现基础组件使用。

本示例是AntDesign Blazor的入门示例，在学习的同时分享出来，以供新手参考。

示例代码仓库：https://gitee.com/known/BlazorDemo

1. 开发环境

  • VS2022 17.8.2
  • .NET8
  • AntDesign 0.16.2

2. 学习目标

  • 创建新项目
  • 安装AntDesign组件包及使用方法
  • 添加按钮测试组件

3. 演练步骤

  1. 打开VS2022，新建Blazor Web App，命名AntDesignDemo

  2. 双击AntDesignDemo工程文件，添加AntDesign，或者使用nuget工具搜索安装

<Project Sdk="Microsoft.NET.Sdk.Web">
    <PropertyGroup>
        <TargetFramework>net8.0</TargetFramework>
        <Nullable>enable</Nullable>
        <ImplicitUsings>enable</ImplicitUsings>
    </PropertyGroup>
    <ItemGroup>
        <!--这里添加AntDesign-->
        <PackageReference Include="AntDesign" Version="0.16.2" />
    </ItemGroup>
</Project>
  1. 双击Components/App.razor文件，添加AntDesign的css和js
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8
最低0.47元/天 解锁文章
【Blazor之关于组件库Ant Design of Blazor组件样式的修改】
weixin_48464854的博客
11-14 2075
Blazor之关于组件库Ant Design of Blazor组件样式的修改
Blazor + Ant Design + .NET 5快速开发框架（7） webApi设计思路
qq_32174441的博客
04-19 1769
前言 虽然一直在更新代码，但是文章写的比较少了，因为一直再写webApi，涉及到图片可能比较少，而且一直再改，因为我也不太确定用哪种方法或者设计模式是最好的，个人定义是使用方便，快速开发，所以摒弃了很多复杂设计，用最简单但不简陋的方法设计出来。 系统架构 初始想法很简单，先做出来，然后在修改添加功能，直至完善，这是一个初始的设计思路，界面发送http请求到webApi，然后请求到控制器，控制器调用请求方法，请求方法调用请求数据，然后返回，中间有一步是通过控制器，将model转为viewModel，
Blazor WebAssembly 示例第二版（三）
最新发布
龙哥盟
10-12 428
在 Blazor WebAssembly 应用中，浏览器的内存用于保存应用程序的状态。这意味着当用户在页面之间导航时，除非我们保留它，否则状态会丢失。我们将使用AppState模式来保留应用程序的状态。在AppState模式中，一个服务被添加到 DI 容器中，以协调相关组件之间的状态。该服务包含所有需要维护的状态。因为服务由 DI 容器管理，所以它可以比单个组件存活更久，并且可以在 UI 发生变化时保留应用程序的状态。该服务可以是一个简单的类或一个复杂的类。
Blazor + Ant Design + .NET 5快速开发框架（8）Ant Design Icon图标库
qq_32174441的博客
04-23 1993
前言 icon可以使网站一目了然，在网站中假如一个可以直接选择图标的blazor组件，由于Ant Design没提供可以直接显示图标的组件，这里打算自己弄一个，方式是把所有的icon名称拷贝下来，然后遍历显示就可以。 爬网站 我的用方式简单粗暴，直接ctrl+s把页面保存下来，然后利用正则提取。 正则表达式：<span class=\"ant-badge\" id=\"(.*?)\" _bl_(.*?)=\"\">(.*?)</span> 亲测好用，一共是420个图标，以后
.NET进行客户端Web开发又一利器 - Ant Design Blazor
Dotnet9的专栏
06-20 1531
你好，我是Dotnet9，继上篇介绍Bootstrap风格的BlazorUI组件库后，今天我来介绍另一款Blazor UI组件库：一套基于 Ant Design 和 Blazor 的企业级组件库。 本文导航： 一、关于Ant Design Blazor 二、Ant Design Blazor的社区贡献 2.1 项目关注度 2.2 Ant Design官方认可 2.3 微软官方认可 三、Ant Design Blazor UI库介绍 四、Ant Design Blazor后续计划 五、Ant Desi
Blazor一个简单的示例让我们来起飞
冯辉
05-05 3225
Blazor Blazor他是一个开源的Web框架,不,这不是重点，重点是它可以使c#开发在浏览器上运行Web应用程序.它其实也简化了SPA的开发过程. Blazor = Browser + Razor 为什么选择Blazor? Blazor可以让.NET附有全栈开发功能,它可以使Web开发变得轻松而高效.而且Blazor是开源的,它得到了社区的大力支持,而且发展速度会很快. 它还拥有SPA的...
基于Labview的BS系统web的项目示例——数据库读写功能
10-30
基于Labview的BS系统web的项目示例——数据库读写功能 实现目标： 在上次笔记的基础上，添加数据库的读写功能 浏览器端通过：写入数据按钮，将数据传入后端，后端接收数据并写入数据库 浏览器端通过：读取数据按钮...
UE4调DLL示例——成功
09-06
在提供的"UE4调DLL示例——成功"压缩包中，你应该能找到一个完整的示例，包括DLL项目和UE4工程。通过研究这些代码，你可以更深入地了解如何将DLL与UE4结合使用。这个示例将演示如何正确配置项目，编写必要的函数，...
python学习：pycharm创建项目（csdn）————程序.pdf
12-03
【Python学习：PyCharm创建项目】 在Python编程的学习过程中，集成开发环境（IDE）扮演着重要的角色，PyCharm就是其中的一款强大的Python IDE。它提供了丰富的功能，帮助开发者高效地编写、调试和管理代码。以下将...
Collie示例——基于HTML5的高性能JavaScript 动画库
03-19
Collie 是一个 JavaScript 库，用于创建高度优化的 HTML5 动画和游戏。Collie 可以运行在 PC 和手机上，使用 HTML5 Canvas 和 DOM。Collie 能够多线程稳定的处理多个对象，支持很多实用的功能，包括精灵动画和用户...
采用分布式账本技术的结算——Jasper项目第三阶段报告-40.pdf
12-25
【分布式账本技术在结算中的应用——Jasper项目第三阶段报告】 Jasper项目是由加拿大银行、TMX集团、Payments Canada以及 Accenture 和 R3等机构合作进行的一项研究，旨在探索分布式账本技术（DLT）在加拿大金融...
blazor-examples：Microsoft Blazor的示例
02-22
开拓者的例子 示例。 跑 命令行 转到示例文件夹（.csproj或.vbproj所在的位置） 在该文件夹中打开命令行 执行dotnet watch run Visual Studio程式码 在Visual Studio Code中打开blazor示例 在VSCode中，在示例文件夹的根目录（.csproj或.vbproj所在的位置）中打开一个文件。 使用build命令。 结果，该项目将以监视模式启动，并且浏览器将打开。 文件 Visual Studio代码插件 带有debug.javascript.usePreview = true 。 执照 欧盟公共许可证版本1.2 版权 版权所有:copyright:2020-2021 Rick Beerendonk
P14_Blazor项目实例_ThreeBlazorCoreWeb_2020_1_15.rar
01-15
P14_Blazor项目实例_ThreeBlazorCoreWeb_2020_1_15 ASP.NET Core 3.0 入门视频 主讲老师：杨旭 第14课视频实例代码
BlazorWasmEFCoreExample:Blazor WebAssembly项目的示例，该项目在服务器上使用Entity Framework Core进行数据访问
04-14
BlazorWasmEFCoreExample Blazor WebAssembly项目的示例，该项目在服务器上使用Entity Framework Core进行数据访问。 您更喜欢Blazor Server吗？ 没问题！ 为服务器实现了相同的项目。 我创建了该系列博客文章以详细解释该项目（注意：该系列在提交有效）： 对于最新版本，请在此处阅读有关最新一轮重构的信息： 谢谢 :folded_hands: 感谢（ 帮助确定最初的问题。 特征 应用程序托管的身份验证和注册 扩展的身份功能可审核用户的创建，修改，电子邮件确认和删除 实体框架核心 多个数据上下文 实体框架核心日志记录 阴影属性：数据库跟踪行版本，创建实体和时间戳的用户以及最后修改实体和时间戳的用户，而无需在C＃域类上定义这些属性 自动审核，可跟踪快照前后的更改，并在数据上下文级别生成 具有增量分辨率的乐观并发（当数据库更改时，UI会显示更改，以便用
ant-design-blazor：:rainbow:基于Ant Design和Blazor WebAssembly的一组企业级UI组件
02-03
蚂蚁设计西装外套 一组基于Ant Design和Blazor的企业级UI组件。 English | :sparkles: 产品特点 :rainbow: 专为Web应用程序设计的企业级UI。 :package: 开箱即用的一组高质量Blazor组件。 :two_hearts: 支持基于WebAssembly的客户端和基于SignalR的服务器端UI事件交互。 :artist_palette: 支持渐进式Web应用程序（PWA）。 :shield: 使用C＃（一种多范式静态语言）进行构建，以获得高效的开发体验。 :gear_selector: 基于.NET Standard 2.1 / .NET 5，直接引用丰富的.NET生态系统。 :wrapped_gift: 与现有的ASP.NET Core MVC和Razor Pages项目无缝集成。 :rainbow: 在线实例 WebAssembly静态托管示例： :desktop_computer: 环境支援 .NET Core 3.1 / .NET 5 Blazor WebAssembly 3.2 / .NET 5版本
ant-design-demos
02-03
ant design demo 直接打开里面Html即可，chrome最佳
【亲测免费】 Ant Design Blazor 使用教程
gitblog_00079的博客
08-13 1414
Ant Design Blazor 是一套基于 Ant Design 和 Blazor 的企业级 UI 组件库。它旨在为 Blazor 项目提供高质量的 UI 组件，使得开发者能够快速构建出现代化的 Web 应用。Ant Design Blazor 遵循 Ant Design 的设计规范，并提供了丰富的组件和工具，以支持复杂的业务需求。 ## 项目快速启动 要快速启动一个 Ant Design ...
推荐使用：Ant Design Pro Blazor —— 超凡的Blazor企业级应用框架
gitblog_00054的博客
05-18 1018
Ant Design Pro Blazor 是一款专为构建企业级应用程序而设计的强大Blazor框架。它提供了丰富的预设模板和组件，旨在帮助开发者快速搭建功能完善的前端界面，实现从零到一的飞跃。无论您是新手还是经验丰富的开发者，这款框架都将大大提升您的开发效率。 ![Ant Design Pro Blazor Screenshot](https://user-images.githubuserc...
Blazor入门-连接MySQL的简单例子：列出数据+简单查询
陆沙的博客
05-29 2142
blazor mysql 连接 简单操作
使用Taro3结合Vue3创建示例项目
资源摘要信息:"Taro3-Vue3-Demo是利用Taro框架版本3，结合Vue3进行开发的示例项目。该项目演示了如何使用Vue3的新特性，例如Composition API中的setup函数，以及Vue3中引入的ref函数来创建响应式变量。同时，这个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值