网站首页 全球最实用的IT互联网站!

人工智能P2P分享Wind搜索发布信息网站地图标签大全

当前位置:诺佳网 > 软件工程 > 后端开发 > .Net >

使用Radzen Blazor组件库开发的基于ABP框架炫酷UI主

时间:2024-10-22 15:14

人气:

作者:admin

标签:

导读:一、项目简介 使用过ABP框架的童鞋应该知道它也自带了一款免费的Blazor UI主题,它的页面是长这样的: 个人感觉不太美观,于是网上搜了很多Blazor开源组件库,发现有一款样式非常不错...

使用过ABP框架的童鞋应该知道它也自带了一款免费的Blazor UI主题,它的页面是长这样的:
image

个人感觉不太美观,于是网上搜了很多Blazor开源组件库,发现有一款样式非常不错的组件库,名叫:Radzen,它的组件库案例网址是:Sample Blazor Dashboard | Free UI Components by Radzen,比较符合我的审美,于是使用它开发了基于ABP框架的UI主题,项目名称叫Abp.RadzenUI,已在Github上开源:GitHub - ShaoHans/Abp.RadzenUI: Abp RadzenUI is a UI theme built on the Abp framework and developed using the Radzen Blazor component,欢迎大家star。已经提供了基本的功能:登录(支持多租户)、角色管理、用户管理、权限分配、租户管理、多语言切换、免费主题样式切换、侧边栏菜单等;

1.登录页面,支持多租户的切换登录

image

2.用户列表

image

3.权限分配

image

4.支持多语言切换

image

5.支持多主题切换

image

要体验更多的功能,你可以下载本项目到本地亲自体验

  1. 使用ABP CLI工具创建一个新的Abp Blazor Server应用,例如项目名称叫CRM
    abp new CRM -u blazor-server -dbms PostgreSQL -m none --theme leptonx-lite -csf
  2. 在CRM.Blazor项目安装AbpRadzen.Blazor.Server.UI包
    dotnet add package AbpRadzen.Blazor.Server.UI
  3. 移除CRM.Blazor项目中与leptonx-lite主题相关的nuget包和代码
    主要是 CRMBlazorModule 类中的代码需要精简,可以参考示例项目中的CRMBlazorWebModule.cs文件代码,你可以直接将它的代码覆盖你的代码;
    然后删除Pages目录中自带的razor页面文件。
  4. 对 Abp RadzenUI 进行配置
    将 ConfigureAbpRadzenUI 方法添加到ConfigService方法中
private void ConfigureAbpRadzenUI()
{
    // Configure AbpRadzenUI
    Configure<AbpRadzenUIOptions>(options =>
    {
        // 这句代码很重要,它会将你在Blazor Web项目中新建的razor页面组件添加到Router中,这样就可以访问到了
        options.RouterAdditionalAssemblies = [typeof(Home).Assembly];

        // 配置页面标题栏
        //options.TitleBar = new TitleBarSettings
        //{
        //    ShowLanguageMenu = false, // 是否显示多语言按钮菜单
        //    Title = "CRM" // 标题栏名称:一般是系统名称
        / 
温馨提示:以上内容整理于网络,仅供参考,如果对您有帮助,留下您的阅读感言吧!
相关阅读
本类排行
相关标签
本类推荐

CPU | 内存 | 硬盘 | 显卡 | 显示器 | 主板 | 电源 | 键鼠 | 网站地图

Copyright © 2025-2035 诺佳网 版权所有 备案号:赣ICP备2025066733号
本站资料均来源互联网收集整理,作品版权归作者所有,如果侵犯了您的版权,请跟我们联系。

关注微信