AntBlazor Theme in ABP Framework
介绍
ABP抽象了主题系统,将已有的UI更改到其他的UI框架非常简单,本文介绍了如何将主题切换为AntBlazor Theme。 源码以及示例在Gihub开源。
Lsw.Abp.AntDesignUI 项目与ABP官方无关,它是一个社区项目。
什么是Ant Blazor 和 Lsw.Abp.AntDesignUI
Ant Blazor全称Ant Design Blazor,是一个流行的社区项目,比较符合国人审美,用于创建美观,高性能的Blazor应用程序。
Lsw.Abp.AntDesignUI 是一个基于 Ant Design Blazor 的ABP前端主题项目,完全替换了基本主题所有页面。
创建一个新的ABP解决方案
使用ABP CLI命令创建Blazor应用程序:
abp new BookStore -u blazor
如果没有安装ABP CLI使用下面命令安装:
dotnet tool install -g Volo.Abp.Cli
解决方案如下图所示:
更换默认主题包
ABP默认使用Blazorise做为UI框架基于它创建了一套基本主题,使用 Lsw.Abp.AntDesignUI
替换基本主题.
打开 BookStore.Blazor.csproj
文件替换为以下内容:
<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
<Import Project="..\..\common.props" />
<PropertyGroup>
<TargetFramework>net6.0</TargetFramework>
<BlazorWebAssemblyLoadAllGlobalizationData>true</BlazorWebAssemblyLoadAllGlobalizationData>
</PropertyGroup>
<ItemGroup>
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="6.0.0" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="6.0.0" />
</ItemGroup>
<ItemGroup>
<PackageReference Include="Volo.Abp.Autofac.WebAssembly" Version="5.1.4" />
</ItemGroup>
<ItemGroup>
<PackageReference Include="Lsw.Abp.IdentityManagement.Blazor.WebAssembly.AntDesignUI" Version="0.1.0" />
<PackageReference Include="Lsw.Abp.SettingManagement.Blazor.WebAssembly.AntDesignUI" Version="0.1.0" />
<PackageReference Include="Lsw.Abp.TenantManagement.Blazor.WebAssembly.AntDesignUI" Version="0.1.0" />
</ItemGroup>
<ItemGroup>
<ProjectReference Include="..\..\src\BookStore.HttpApi.Client\BookStore.HttpApi.Client.csproj" />
</ItemGroup>
</Project>
更改导入文件
打开 _Imports.razor
文件将提示错误的引用替换为以下引用:
@using AntDesign
@using Lsw.Abp.AntDesignUI
@using Lsw.Abp.AntDesignUI.Components
@using Lsw.Abp.AspnetCore.Components.Web.AntDesignTheme.Layout
更改Blazor项目
BookStoreBlazorModule 模块类
1. 删除ConfigureBlazorise 方法
2. 根据IDE提示修复错误的命令空间引用
3. 替换模块依赖,比如将 AbpIdentityBlazorWebAssemblyModule
替换为 AbpIdentityBlazorWebAssemblyAntDesignModule
更新Icon
打开菜单配置类 BookStoreMenuContributor
:
"fas fa-home"
更改为IconType.Outline.Home
"fa fa-cog"
更改为IconType.Outline.Setting
更新Index页面
使用以下代码替换 Index.razor
:
@page "/"
@inherits BookStoreComponentBase
<AbpPageHeader Title="Index"></AbpPageHeader>
<div class="page-content">
<div style="text-align: center">
<Alert Type="@AlertType.Success"
Message="Success"
Description=" Congratulations, BookStore is successfully running!"
ShowIcon="true"/>
<Divider/>
</div>
</div>
更新静态资源包
在 BookStore.Blazor
项目目录打开 terminal 运行 dotnet build
& abp hundle
命令, abp bundle
用于更新捆绑资源.
All done
使用 BookStore.DbMigrator
创建数据库与初始化种子数据,运行 BookStore.HttpApi.Host
和 BookStore.Blazor
项目,你会看到以下页面:
AntBlazor Theme in ABP Framework的更多相关文章
- ABP Framework V4.4 RC 新增功能介绍
目录 新增功能概述 启动模板删除 EntityFrameworkCore.DbMigrations 项目 CMS-Kit 动态菜单管理 Razor引擎对文本模板的支持 DbContext/Entiti ...
- Aspect Oriented Programming using Interceptors within Castle Windsor and ABP Framework AOP
http://www.codeproject.com/Articles/1080517/Aspect-Oriented-Programming-using-Interceptors-wit Downl ...
- ABP Framework 研习社经验总结(6.28-7.2)
ABP Framework 研习社经验总结(6.28-7.2) 研习社初衷 在翻译 <实现领域驱动设计>-- 基于 ABP Framework 实现领域驱动设计实用指南 时,因为DDD理论 ...
- ABP Framework:移除 EF Core Migrations 项目,统一数据上下文
原文:Unifying DbContexts for EF Core / Removing the EF Core Migrations Project 目录 导读:软件开发的一切都需要平衡 动机 警 ...
- ABP Framework 为什么好上手,不好深入?探讨最佳学习姿势!
离写上一篇经验总结 ABP Framework 研习社经验总结(6.28-7.2) ,已经过去两周. ABP Framework 研习社(QQ群:726299208) 最近一周,又迎来了很多新伙伴,成 ...
- ABP Framework 5.0 RC.1 新特性和变更说明
.Net 6.0 发布之后,ABP Framework 也在第一时间进行了升级,并在一个多星期后(2021-11-16)发布了 5.0 RC.1 ,新功能和重要变更基本已经确定. 5.0版本新特性 新 ...
- ABP Framework 5.2 RC 发布及新增功能介绍
ABP Framework 5.2 RC 新增功能 目录 ABP Framework 5.2 RC 新增功能 单层解决方案模板 EF Core 数据库迁移 UI 和 数据库 选项 API 版本控制 源 ...
- 翻译《Mastering ABP Framework》
前言 大家好,我是张飞洪,谢谢你阅读我的文章. 自从土牛Halil ibrahim Kalkan的<Mastering ABP Framework>出版之后,我就开始马不停蹄进行学习阅读和 ...
- ABP Framework 5.3.0 版本新增功能和变更说明
ABP Framework 5.3.0 稳定版已在2022年6月14日正式发布. 以下是本版本的新增功能: "开始"页面提供创建单层项目选项 启动模板提供 PWA 支持 Volo. ...
随机推荐
- python字符串系列--2
#!/usr/bin/python #coding=utf-8 first_name='tiger' last_name='gao' full_name= f"{first_name} {l ...
- 『无为则无心』Python基础 — 42、Python中文件的读写操作(二)
目录 (5)文件对象方法(重点) 1)写方法 2)读方法 3)seek()方法 4)tell()方法 (6)关闭 (7)综合练习:读取大文件 (5)文件对象方法(重点) 1)写方法 @1.语法 对象对 ...
- 在EntityFrameworkCore中记录EF修改日志,保存,修改字段的原始值,当前值,表名等信息
突发奇想,想把业务修改的所有字段原始值和修改后的值,做一个记录,然后发现使用EF可以非常简单的实现这个功能 覆盖父类中的 SaveShanges() 方法 public new int SaveCha ...
- STC89C52引脚图(彩色)
不知道大家有没有见过像这样的arduino引脚功能图: 还有ESP系列: 还有stm32的: 给人的第一感觉就是漂亮,清晰明了,相比之下STC51的就...... 楼主搜罗了一下,目前网络上还没有 ...
- Python标准库:datetime 时间和日期模块 —— 时间的获取和操作详解
datetime 时间和日期模块 datetime 模块提供了以简单和复杂的方式操作日期和时间的类.虽然支持日期和时间算法,但实现的重点是有效的成员提取以进行输出格式化和操作.该模块还支持可感知时区的 ...
- Maven仓库的目录结构
_remote.repositories文件 本地库中的包都有一个_remote.repositories文件,示例: #NOTE: This is an Aether internal implem ...
- JAVA多线程学习五:线程范围内共享变量&ThreadLocal
一.概念 可以将每个线程用到的数据与对应的线程号存放到一个map集合中,使用数据时从这个集合中根据线程号获取对应线程的数据,就可以实现线程范围内共享相同的变量. 二.代码 Runnable中的run( ...
- rabbitMq使用guest登录不上的问题总结
自己mac电脑上的mq在电脑关机(直接按电源键关机),在开机后,rabbitMq连不上了,报500错误. 1.在使用brew uninstall rabbitmq --force后; 2.我手动安装了 ...
- 直播流媒体ums
准备工具 下载 UltrantMediaServer服务器 FlashMediaLiveEncoder测试直播工具 第一步 安装 UltrantMediaServer服务器 第二步 打开网也输入 ...
- Lvs+Keepalived+MySQL Cluster架设高可用负载均衡Mysql集群
------------------------------------- 一.前言 二.MySQL Cluster基本概念 三.环境 四.配置 1.LB-Master及LB-Backup配置 2.M ...