LeptonX Lite Blazor UI

LeptonX Lite 为 ABP Blazor WebAssembly 和 Blazor Server 提供了实现。它是 LeptonX Theme 的简化版本。

如果您正在寻找一个专业、企业级就绪的主题，可以查看 LeptonX Theme，它是 ABP 的一部分。

请参阅 主题文档 以了解有关主题的更多信息。

安装

使用启动模板创建新解决方案时，此主题已预装。如果您使用其他模板，可以按照以下步骤安装此主题：

• 首先完成 MVC Razor Pages 安装。如果解决方案是分层/微服务架构，请为所有 MVC 应用程序（例如 HttpApi.Host 和 AuthServer）完成 MVC 步骤。

• 使用以下命令将 Volo.Abp.AspNetCore.Components.Server.LeptonXLiteTheme 包添加到您的 Blazor server 应用程序：

  dotnet add package Volo.Abp.AspNetCore.Components.Server.LeptonXLiteTheme --prerelease
  

• 从项目中移除 Volo.Abp.AspNetCore.Components.Server.BasicTheme 引用，因为在切换到 LeptonX Lite 后不再需要。

• 从模块类的 DependsOn 特性中移除旧主题，并将 AbpAspNetCoreComponentsServerLeptonXLiteThemeModule 类型添加到 DependsOn 特性中。

  [DependsOn(
      // 从 DependsOn 特性中移除 BasicTheme 模块
  -    typeof(AbpAspNetCoreComponentsServerBasicThemeModule),
  
      // 将 LeptonX Lite 模块添加到 DependsOn 特性
  +    typeof(AbpAspNetCoreComponentsServerLeptonXLiteThemeModule)
  )]
  

• 在 AbpBundlingOptions 中将 BlazorBasicThemeBundles 替换为 BlazorLeptonXLiteThemeBundles：

  options.StyleBundles.Configure(
    // 移除以下行
  - BlazorBasicThemeBundles.Styles.Global,
    // 改为添加以下行
  + BlazorLeptonXLiteThemeBundles.Styles.Global,
    bundle =>
    {
        bundle.AddFiles("/blazor-global-styles.css");
        // 如果不为组件使用 Blazor CSS 隔离，可以移除以下行
        bundle.AddFiles("/MyProjectName.Blazor.styles.css");
    });
  

• 更新 App.razor 文件。（默认位于 Components 文件夹下。）

  • 在页面顶部添加以下命名空间。

    @using Volo.Abp.AspNetCore.Components.Server.LeptonXLiteTheme.Bundling
    

  • 然后按如下方式替换脚本和样式捆绑包

    <AbpStyles BundleName="@BlazorLeptonXLiteThemeBundles.Styles.Global" />
    

    <AbpScripts BundleName="@BlazorLeptonXLiteThemeBundles.Scripts.Global" />
    

更新 Routes.razor 文件，如下所示：

@using Volo.Abp.AspNetCore.Components.Web.LeptonXLiteTheme.Themes.LeptonXLite
@using Volo.Abp.AspNetCore.Components.Web.Theming.Routing
@using Microsoft.Extensions.Options
@inject IOptions<AbpRouterOptions> RouterOptions
<Router AppAssembly="typeof(Program).Assembly" AdditionalAssemblies="RouterOptions.Value.AdditionalAssemblies">
    <Found Context="routeData">
        <AuthorizeRouteView RouteData="routeData" DefaultLayout="typeof(MainLayout)">
            <NotAuthorized>
                <RedirectToLogin />
            </NotAuthorized>
        </AuthorizeRouteView>
    </Found>
</Router>

定制

布局

• 在您的 Blazor 应用程序中创建一个 Razor 页面，例如 MyMainLayout.razor，如下所示：

@using Volo.Abp.AspNetCore.Components.Web.LeptonXLiteTheme.Themes.LeptonXLite;
@using Volo.Abp.DependencyInjection

@inherits MainLayout
@attribute [ExposeServices(typeof(MainLayout))]
@attribute [Dependency(ReplaceServices = true)]

@Name

@code {
    string Name = "我的主布局";
}

• 如果您希望使用代码隐藏文件来存放组件的 C# 代码，请在您的 Blazor 应用程序中创建一个 Razor 组件，例如 MyMainLayout.razor.cs，如下所示：

[ExposeServices(typeof(MainLayout))]
[Dependency(ReplaceServices = true)]
namespace LeptonXLite.DemoApp.Blazor.MyComponents
{
    public partial class MyMainLayout
    {
        public string Name = "我的主布局";
    }
}

不要忘记从 Razor 页面中移除重复的特性！ 不要忘记从 Razor 页面中移除 @code 部分！

工具栏

LeptonX Lite 包含桌面版和移动版独立的工具栏。您可以独立管理工具栏。工具栏名称可以在 LeptonXLiteToolbars 类中访问。

• LeptonXLiteToolbars.Main
• LeptonXLiteToolbars.MainMobile

public async Task ConfigureToolbarAsync(IToolbarConfigurationContext context)
{
    if (context.Toolbar.Name == LeptonXLiteToolbars.Main)
    {
        context.Toolbar.Items.Add(new ToolbarItem(typeof(MyDesktopComponent)));
    }

    if (context.Toolbar.Name == LeptonXLiteToolbars.MainMobile)
    {
        context.Toolbar.Items.Add(new ToolbarItem(typeof(MyMobileComponent)));
    }

    return Task.CompletedTask;
}

您可以访问 工具栏文档 以获得更好的理解。

组件

LeptonX Blazor 基于组件构建。您可以根据需要在自己的应用程序中使用这些组件，也可以通过重写它们来自定义组件。如果要重写组件，请遵循以下步骤。

品牌组件

品牌组件 是一个简单的组件，可用于显示您的品牌。它包含一个 徽标 和一个 公司名称。

如何重写品牌组件

• 在您的 Blazor 应用程序中创建一个 Razor 页面，例如 MyBrandingComponent.razor，如下所示：

@using Volo.Abp.AspNetCore.Components.Web.LeptonXLiteTheme.Themes.LeptonXLite;
@using Volo.Abp.DependencyInjection

@inherits Branding
@attribute [ExposeServices(typeof(Branding))]
@attribute [Dependency(ReplaceServices = true)]

@Name

@code {
    string Name = "我的品牌组件";
}

• 如果您希望使用代码隐藏文件来存放组件的 C# 代码，请在您的 Blazor 应用程序中创建一个 Razor 组件，例如 MyBrandingComponent.razor.cs，如下所示：

namespace LeptonXLite.DemoApp.Blazor.MyComponents
{
    public partial class MyBrandingComponent
    {
        public string Name = "我的品牌组件";
    }
}

如何重写网站图标

启动模板在 Blazor 应用程序的 wwwroot 文件夹下包含 favicon.ico 文件。您可以替换此文件以覆盖当前的网站图标。

面包屑导航组件

在拥有大量页面的网站上，面包屑导航 可以极大地 增强用户查找路径的方式。就 可用性 而言，面包屑减少了网站 访问者 为到达 更高层级页面 所需采取的操作次数，并 提高了 网站 版块 和 页面 的 可发现性。

如何重写面包屑导航组件

• 在您的 Blazor 应用程序中创建一个 Razor 页面，例如 MyBreadcrumbsComponent.razor，如下所示：

@using Volo.Abp.AspNetCore.Components.Web.LeptonXLiteTheme.Themes.LeptonXLite;
@using Volo.Abp.DependencyInjection

@inherits Breadcrumbs
@attribute [ExposeServices(typeof(Breadcrumbs))]
@attribute [Dependency(ReplaceServices = true)]

@Name

@code {
    string Name = "我的面包屑导航组件";
}

• 如果您希望使用代码隐藏文件来存放组件的 C# 代码，请在您的 Blazor 应用程序中创建一个 Razor 组件，例如 MyBreadcrumbsComponent.razor.cs，如下所示：

using Volo.Abp.AspNetCore.Components.Web.LeptonXLiteTheme.Themes.LeptonXLite;
using Volo.Abp.DependencyInjection;

namespace LeptonXLite.DemoApp.Blazor.MyComponents
{
    [ExposeServices(typeof(Breadcrumbs))]
    [Dependency(ReplaceServices = true)]
    public partial class MyBreadcrumbsComponent
    {
        public string Name = "我的面包屑导航组件";
    }
}

主菜单组件

侧边栏菜单已被用作 相关页面的目录 以提供 服务、特定服务 或主题的 导航项，甚至只是用户可能感兴趣的 链接。

如何重写主菜单组件

• 在您的 Blazor 应用程序中创建一个 Razor 页面，例如 MyMainMenuComponent.razor，如下所示：

@using Volo.Abp.AspNetCore.Components.Web.LeptonXLiteTheme.Themes.LeptonXLite.Navigation;
@using Volo.Abp.DependencyInjection

@inherits MainMenu
@attribute [ExposeServices(typeof(MainMenu))]
@attribute [Dependency(ReplaceServices = true)]

@Name

@code {
    string Name = "我的主菜单组件";
}

• 如果您希望使用代码隐藏文件来存放组件的 C# 代码，请在您的 Blazor 应用程序中创建一个 Razor 组件，例如 MyMainMenu.razor.cs，如下所示：

using Volo.Abp.AspNetCore.Components.Web.LeptonXLiteTheme.Themes.LeptonXLite.Navigation;
using Volo.Abp.DependencyInjection;

namespace LeptonXLite.DemoApp.Blazor.MyComponents
{
    [ExposeServices(typeof(MainMenu))]
    [Dependency(ReplaceServices = true)]
    public partial class MainMenu
    {
        public string Name = "我的主菜单组件";
    }
}

主菜单 动态 渲染菜单项。菜单项 是一个名为 MainMenuItem.razor.cs 的 Razor 组件，位于与 主菜单 相同的命名空间中，您可以像重写主菜单一样 重写它。

工具栏项组件

工具栏项用于为 工具栏添加额外功能。工具栏是一个 水平条，包含 一组 工具栏项。

如何重写工具栏项组件

• 在您的 Blazor 应用程序中创建一个 Razor 页面，例如 MyToolbarItemsComponent.razor，如下所示：

@using Volo.Abp.AspNetCore.Components.Web.LeptonXLiteTheme.Themes.LeptonXLite;
@using Volo.Abp.DependencyInjection

@inherits ToolbarItemsComponent
@attribute [ExposeServices(typeof(ToolbarItemsComponent))]
@attribute [Dependency(ReplaceServices = true)]

@Name

@code {
    string Name = "我的工具栏项组件";
}

• 如果您希望使用代码隐藏文件来存放组件的 C# 代码，请在您的 Blazor 应用程序中创建一个 Razor 组件，例如 MyToolbarItemsComponent.razor.cs，如下所示：

using Volo.Abp.AspNetCore.Components.Web.LeptonXLiteTheme.Themes.LeptonXLite;
using Volo.Abp.DependencyInjection;

namespace LeptonXLite.DemoApp.Blazor.MyComponents
{
    [ExposeServices(typeof(ToolbarItemsComponent))]
    [Dependency(ReplaceServices = true)]
    public partial class MyToolbarItemsComponent
    {
        public string Name = "我的工具栏项组件";
    }
}

语言切换组件

考虑一个 多语言 网站，首先可能 映入脑海 的就是 语言切换组件。导航栏 是 嵌入语言切换的绝佳位置。通过将语言切换嵌入网站导航栏，您可以让用户 更轻松地找到它 并 轻松 切换 语言，无需在网站各处费力寻找。

如何重写语言切换组件

• 在您的 Blazor 应用程序中创建一个 Razor 页面，例如 MyLanguageSwitchComponent.razor，如下所示：

@using Volo.Abp.AspNetCore.Components.Web.LeptonXLiteTheme.Themes.LeptonXLite.Toolbar;
@using Volo.Abp.DependencyInjection

@inherits LanguageSwitchComponent
@attribute [ExposeServices(typeof(LanguageSwitchComponent))]
@attribute [Dependency(ReplaceServices = true)]

@Name

@code {
    string Name = "我的语言切换组件";
}

• 如果您希望使用代码隐藏文件来存放组件的 C# 代码，请在您的 Blazor 应用程序中创建一个 Razor 组件，例如 MyLanguageSwitchComponent.razor.cs，如下所示：

using Volo.Abp.AspNetCore.Components.Web.LeptonXLiteTheme.Themes.LeptonXLite.Toolbar;
using Volo.Abp.DependencyInjection;

namespace LeptonXLite.DemoApp.Blazor.MyComponents
{
    [ExposeServices(typeof(LanguageSwitchComponent))]
    [Dependency(ReplaceServices = true)]
    public partial class MyLanguageSwitchComponent
    {
        public string Name = "我的语言切换组件";
    }
}

移动端语言切换组件

移动端 语言切换组件 用于在 移动设备 上切换网站语言。移动端语言切换组件是一个 下拉菜单，包含 网站的所有 语言。

如何重写移动端语言切换组件

• 在您的 Blazor 应用程序中创建一个 Razor 页面，例如 MyMobilLanguageSwitchComponent.razor，如下所示：

@using Volo.Abp.AspNetCore.Components.Web.LeptonXLiteTheme.Themes.LeptonXLite.Toolbar;
@using Volo.Abp.DependencyInjection

@inherits MobilLanguageSwitchComponent
@attribute [ExposeServices(typeof(MobilLanguageSwitchComponent))]
@attribute [Dependency(ReplaceServices = true)]

@Name

@code {
    string Name = "我的移动端语言切换组件";
}

• 如果您希望使用代码隐藏文件来存放组件的 C# 代码，请在您的 Blazor 应用程序中创建一个 Razor 组件，例如 MyMobilLanguageSwitchComponent.razor.cs，如下所示：

using Volo.Abp.AspNetCore.Components.Web.LeptonXLiteTheme.Themes.LeptonXLite.Toolbar;
using Volo.Abp.DependencyInjection;

namespace LeptonXLite.DemoApp.Blazor.MyComponents
{
    [ExposeServices(typeof(MobilLanguageSwitchComponent))]
    [Dependency(ReplaceServices = true)]
    public partial class MyMobilLanguageSwitchComponent
    {
        public string Name = "我的移动端语言切换组件";
    }
}

用户菜单组件

用户菜单 是当您单击页面 右上角（工具栏中）的 姓名 或 个人资料图片 时 下拉 的 菜单。它下拉显示诸如 设置、注销 等选项。

如何重写用户菜单组件

• 在您的 Blazor 应用程序中创建一个 Razor 页面，例如 MyUserMenuComponent.razor，如下所示：

@using Volo.Abp.AspNetCore.Components.Server.LeptonXLiteTheme.Themes.LeptonXLite.Toolbar;
@using Volo.Abp.DependencyInjection

@inherits MobilLanguageSwitchComponent
@attribute [ExposeServices(typeof(MobilLanguageSwitchComponent))]
@attribute [Dependency(ReplaceServices = true)]

@Name

@code {
    string Name = "我的用户菜单组件";
}

• 如果您希望使用代码隐藏文件来存放组件的 C# 代码，请在您的 Blazor 应用程序中创建一个 Razor 组件，例如 MyUserMenuComponent.razor.cs，如下所示：

using Volo.Abp.AspNetCore.Components.Server.LeptonXLiteTheme.Themes.LeptonXLite.Toolbar;
using Volo.Abp.DependencyInjection;

namespace LeptonXLite.DemoApp.Blazor.MyComponents
{
    [ExposeServices(typeof(UserMenuComponent))]
    [Dependency(ReplaceServices = true)]
    public partial class MyUserMenuComponent
    {
        public string Name = "我的用户菜单组件";
    }
}

移动端用户菜单组件

移动端用户菜单组件 用于在 移动设备 上显示 用户菜单。移动端用户菜单组件是一个 下拉菜单，包含 用户菜单 的所有 选项。

如何重写移动端用户菜单组件

• 在您的 Blazor 应用程序中创建一个 Razor 页面，例如 MyMobileUserMenuComponent.razor，如下所示：

@using Volo.Abp.AspNetCore.Components.Server.LeptonXLiteTheme.Themes.LeptonXLite.Toolbar;
@using Volo.Abp.DependencyInjection

@inherits MobilUserMenuComponent
@attribute [ExposeServices(typeof(MobilUserMenuComponent))]
@attribute [Dependency(ReplaceServices = true)]

@Name

@code {
    string Name = "我的移动端用户菜单组件";
}

• 如果您希望使用代码隐藏文件来存放组件的 C# 代码，请在您的 Blazor 应用程序中创建一个 Razor 组件，例如 MyMobileUserMenuComponent.razor.cs，如下所示：

using Volo.Abp.AspNetCore.Components.Server.LeptonXLiteTheme.Themes.LeptonXLite.Toolbar;
using Volo.Abp.DependencyInjection;

namespace LeptonXLite.DemoApp.Blazor.MyComponents
{
    [ExposeServices(typeof(MobileUserMenuComponent))]
    [Dependency(ReplaceServices = true)]
    public partial class MyMobileUserMenuComponent
    {
        public string Name = "我的移动端用户菜单组件";
    }
}