LeptonX Blazor UI

LeptonX 主题已实现并可与 ABP 配合使用。对于 Blazor Server 和 WebAssembly，无需自定义实现。

安装

首先为 HttpApi.Host 应用程序完成 MVC Razor Pages 安装步骤。如果解决方案是分层/微服务架构，请为所有 MVC 应用程序（如 HttpApi.Host）完成 MVC 步骤；如果认证服务器是独立的，也请为 OpenIddict 安装。
使用以下命令将 Volo.Abp.AspNetCore.Components.WebAssembly.LeptonXTheme.Bundling 包添加到您的 Blazor 应用程序中：
```
dotnet add package Volo.Abp.AspNetCore.Components.WebAssembly.LeptonXTheme.Bundling --prerelease
```
从项目中移除对 Volo.Abp.AspNetCore.Components.WebAssembly.LeptonTheme.Bundling 的引用，因为切换到 LeptonX Lite 后不再需要它。
从模块类的 DependsOn 特性中移除旧主题，并将 AbpAspNetCoreComponentsWebAssemblyLeptonXThemeBundlingModule 类型添加到 DependsOn 特性中。

[DependsOn(
     // 从 DependsOn 特性中移除 LeptonTheme 模块
-    typeof(AbpAspNetCoreComponentsWebAssemblyLeptonThemeBundlingModule),

    // 将 LeptonX Lite 模块添加到 DependsOn 特性中
+    typeof(AbpAspNetCoreComponentsWebAssemblyLeptonXThemeBundlingModule),
)]

使用以下命令将 Volo.Abp.AspNetCore.Components.WebAssembly.LeptonXTheme 包添加到您的 Blazor.Client 应用程序中：
```
dotnet add package Volo.Abp.AspNetCore.Components.WebAssembly.LeptonXTheme --prerelease
```
从项目中移除对 Volo.Abp.AspNetCore.Components.WebAssembly.LeptonTheme 的引用，因为切换到 LeptonX Lite 后不再需要它。
从模块类的 DependsOn 特性中移除旧主题，并将 AbpAspNetCoreComponentsWebAssemblyLeptonXThemeModule 类型添加到 DependsOn 特性中。

[DependsOn(
     // 从 DependsOn 特性中移除 LeptonTheme 模块
-    typeof(AbpAspNetCoreComponentsWebAssemblyLeptonThemeModule),

    // 将 LeptonX Lite 模块添加到 DependsOn 特性中
+    typeof(AbpAspNetCoreComponentsWebAssemblyLeptonXThemeModule),
)]

更新 Blazor.Client 项目中的 Routes.razor 文件，如下所示：

@using Microsoft.Extensions.Options
@using Microsoft.Extensions.Localization
@using global::Localization.Resources.AbpUi
@using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme
@using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components
@using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout
@using Volo.Abp.AspNetCore.Components.Web.Theming.Routing
@using Volo.Abp.AspNetCore.Components.WebAssembly.WebApp
@inject IOptions<AbpRouterOptions> RouterOptions
@inject IOptions<LeptonXThemeBlazorOptions> LayoutOptions
@inject IStringLocalizer<AbpUiResource> UiLocalizer

<CascadingAuthenticationState>
    <Router AppAssembly="RouterOptions.Value.AppAssembly" AdditionalAssemblies="WebAppAdditionalAssembliesHelper.GetAssemblies<YourBlazorClientModule>()">
        <Found Context="routeData">
            <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@LayoutOptions.Value.Layout">
                <NotAuthorized>
                    @if (context.User?.Identity?.IsAuthenticated != true)
                    {
                        <RedirectToLogin/>
                    }
                    else
                    {
                        <ErrorView
                            Title="@UiLocalizer["403Message"]"
                            HttpStatusCode="403"
                            Message="@UiLocalizer["403MessageDetail"]"/>
                    }
                </NotAuthorized>
            </AuthorizeRouteView>
        </Found>
        <NotFound>
            <LayoutView Layout="@LayoutOptions.Value.Layout">
                <ErrorView
                    Title="@UiLocalizer["404Message"]"
                    HttpStatusCode="404"
                    Message="@UiLocalizer["404MessageDetail"]"/>
            </LayoutView>
        </NotFound>
    </Router>
</CascadingAuthenticationState>

源代码

您可以根据您的 ABP 许可证下载 LeptonX 主题的源代码。

请访问 Lepton X 源代码部分以下载源代码。

自定义

在开始自定义主题之前，您可以考虑下载主题的源代码。您可以在源代码中找到相关组件的原始代码。

主题

您可以通过使用 LeptonXThemeOptions 来设置默认主题、添加或移除主题。

DefaultStyle：定义默认的后备主题。默认值为 Dim。

Configure<LeptonXThemeOptions>(options =>
{
    options.DefaultStyle = LeptonXStyleNames.Dark;
});

Styles：定义可从 UI 中选择的主题。
```
Configure<LeptonXThemeOptions>(options =>
{
    // 移除现有主题
    options.Styles.Remove(LeptonXStyleNames.Light);

    // 添加新主题
    options.Styles.Add("red",
        new LeptonXThemeStyle(
        LocalizableString.Create<YourResource>("Theme:Red"),
        "bi bi-circle-fill"));
});
```
为了使选择您的自定义主题时能正确切换，必须在 wwwroot/_content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/side-menu/css/ 文件夹下添加 red.css 和 bootstrap-red.css 文件。

如果您的布局是 TopMenu，则必须将它们添加到 wwwroot/_content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/top-menu/css/ 文件夹下。

LeptonXThemeBlazorOptions

Blazor UI 的布局选项可以通过使用 LeptonXThemeMvcOptions 来管理。

Layout：主应用程序的布局。默认值为 LeptonXMvcLayouts.SideMenu。

Configure<LeptonXThemeBlazorOptions>(options =>
{
    options.Layout = LeptonXBlazorLayouts.SideMenu;
    // 或者您自定义实现的布局：
    options.Layout = typeof(MyCustomLayoutComponent);
});

MobileMenuSelector：定义在移动菜单中显示的项。默认值是主菜单项的前 2 项。

Configure<LeptonXThemeBlazorOptions>(options =>
{
    options.MobileMenuSelector = items => items.Where(x => x.MenuItem.Name == "MyProjectName.Home" || x.MenuItem.Name == "MyProjectName.Dashboard");
});

工具栏

LeptonX 包含了独立的桌面和移动工具栏。您可以独立管理这些工具栏。工具栏名称可以通过 LeptonXToolbars 类访问。

LeptonXToolbars.Main
LeptonXToolbars.MainMobile

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

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

    return Task.CompletedTask;
}

布局

LeptonX 为您的 Web 应用程序提供了两种现成的布局。一种是顶部菜单布局，另一种是侧边菜单布局。

顶部菜单布局

侧边菜单布局

您可以通过以下步骤覆盖布局：

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

@using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout;
@using Volo.Abp.DependencyInjection

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

@Name

如果您倾向于使用代码后置文件（code-behind）来处理组件的 C# 代码，可以在您的 Blazor 应用程序中创建一个 razor 组件，例如 MySideMenuLayout.razor.cs，如下所示：

using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout;
using Volo.Abp.DependencyInjection;

namespace LeptonX.DemoApp.Blazor.MyComponents
{
    [ExposeServices(typeof(SideMenuLayout))]
    [Dependency(ReplaceServices = true)]
    public partial class MySideMenuLayout
    {
        public string Name = "我的顶部布局";
    }
}

不要忘记从 razor 页面中移除重复的特性（attributes）！

自定义页脚部分

您可以添加一个新的 LeptonXFooter.razor 文件，并按如下方式覆盖 Footer 组件：

@using Volo.Abp.DependencyInjection
@using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout.SideMenu

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

<div class="lpx-footbar-container">
    <div class="lpx-footbar">
        <div class="lpx-footbar-copyright">
            <span>@DateTime.UtcNow.Year©</span>
            <a href="https://leptontheme.com/" target="_blank">Lepton ThemeXXX</a>
            <span>由</span>
            <a href="https://volosoft.com/" target="_blank">Volosoft</a> 提供
        </div>
        <div class="lpx-footbar-solo-links">
            [关于我们](/docs/zh-Hans/abp-docs/master/ui-themes/lepton-x/#)
            [隐私政策](/docs/zh-Hans/abp-docs/master/ui-themes/lepton-x/#)
            [联系我们](/docs/zh-Hans/abp-docs/master/ui-themes/lepton-x/#)
        </div>
    </div>
</div>

如果您使用的是顶部菜单布局，则可以按如下方式更改命名空间：

- @using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout.SideMenu
+ @using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout.TopMenu

您始终可以使用相同的方法来自定义其他组件。

通用组件

在所有布局中通用的组件。

面包屑导航

可以通过使用 PageLayout 服务来自定义面包屑导航。有关更多信息，请参阅 PageLayout - BreadCrumb 部分。

如果您需要替换该组件，可以按照以下步骤操作。

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

@using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout.Common;
@using Volo.Abp.DependencyInjection

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

@Name

如果您倾向于使用代码后置文件来处理组件的 C# 代码，可以在您的 Blazor 应用程序中创建一个 razor 组件，例如 MyBreadcrumbs.razor.cs，如下所示：

using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout.Common;
using Volo.Abp.DependencyInjection;

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

内容工具栏

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

@using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout.Common;
@using Volo.Abp.DependencyInjection

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

@Name

如果您倾向于使用代码后置文件来处理组件的 C# 代码，可以在您的 Blazor 应用程序中创建一个 razor 组件，例如 MyContentToolbar.razor.cs，如下所示：

using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout.Common;
using Volo.Abp.DependencyInjection;

namespace LeptonX.DemoApp.Blazor.MyComponents
{
    [ExposeServices(typeof(ContentToolbar))]
    [Dependency(ReplaceServices = true)]
    public partial class MyContentToolbarComponent
    {
        public string Name = "我的内容工具栏";
    }
}

通用设置

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

@using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout.Common;
@using Volo.Abp.DependencyInjection

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

@Name

如果您倾向于使用代码后置文件来处理组件的 C# 代码，可以在您的 Blazor 应用程序中创建一个 razor 组件，例如 MyGeneralSettings.razor.cs，如下所示：

using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout.Common;
using Volo.Abp.DependencyInjection;

namespace LeptonX.DemoApp.Blazor.MyComponents
{
    [ExposeServices(typeof(GeneralSettings))]
    [Dependency(ReplaceServices = true)]
    public partial class MyGeneralSettings
    {
        public string Name = "我的通用设置";
    }
}

移动端通用设置

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

@using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout.Common;
@using Volo.Abp.DependencyInjection

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

@Name

如果您倾向于使用代码后置文件来处理组件的 C# 代码，可以在您的 Blazor 应用程序中创建一个 razor 组件，例如 MyMobileGeneralSettings.razor.cs，如下所示：

using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout.Common;
using Volo.Abp.DependencyInjection;

namespace LeptonX.DemoApp.Blazor.MyComponents
{
    [ExposeServices(typeof(MobileGeneralSettings))]
    [Dependency(ReplaceServices = true)]
    public partial class MyMobileGeneralSettings
    {
        public string Name = "我的移动端通用设置";
    }
}

侧边菜单组件

侧边菜单布局中使用的组件。

主菜单

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

@using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout.TopMenu.Navigation;
@using Volo.Abp.DependencyInjection

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

@Name

如果您倾向于使用代码后置文件来处理组件的 C# 代码，可以在您的 Blazor 应用程序中创建一个 razor 组件，例如 MyMainMenu.razor.cs，如下所示：

using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout.SideMenu.Navigation;
using Volo.Abp.DependencyInjection;

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

主菜单项

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

@using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout.SideMenu.Navigation;
@using Volo.Abp.DependencyInjection

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

@Name

如果您倾向于使用代码后置文件来处理组件的 C# 代码，可以在您的 Blazor 应用程序中创建一个 razor 组件，例如 MyMainMenuItem.razor.cs，如下所示：

using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout.SideMenu.Navigation;
using Volo.Abp.DependencyInjection;

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

移动端导航栏

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

@using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout.SideMenu.Navigation;
@using Volo.Abp.DependencyInjection

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

@Name

如果您倾向于使用代码后置文件来处理组件的 C# 代码，可以在您的 Blazor 应用程序中创建一个 razor 组件，例如 MyMobileNavbar.razor.cs，如下所示：

using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout.SideMenu.Navigation;
using Volo.Abp.DependencyInjection;

namespace LeptonX.DemoApp.Blazor.MyComponents
{
    [ExposeServices(typeof(MobileNavbar))]
    [Dependency(ReplaceServices = true)]
    public partial class MyMobileNavbar
    {
        public string Name = "我的移动端导航栏";
    }
}

主标题头

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

@using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout.SideMenu.MainHeader
@using Volo.Abp.DependencyInjection

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

@Name

如果您倾向于使用代码后置文件来处理组件的 C# 代码，可以在您的 Blazor 应用程序中创建一个 razor 组件，例如 MyMainHeader.razor.cs，如下所示：

using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout.SideMenu.MainHeader;
using Volo.Abp.DependencyInjection;

namespace LeptonX.DemoApp.Blazor.MyComponents
{
    [ExposeServices(typeof(MainHeader))]
    [Dependency(ReplaceServices = true)]
    public partial class MyMainHeader
    {
        public string Name = "我的主标题头";
    }
}

主标题头品牌标识

应用程序的品牌标识可以通过 IBrandingProvider 进行自定义。更多信息请参阅品牌标识部分。

如果您需要替换该组件，可以按照以下步骤操作。

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

@using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout.SideMenu.MainHeader
@using Volo.Abp.DependencyInjection

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

@Name

如果您倾向于使用代码后置文件来处理组件的 C# 代码，可以在您的 Blazor 应用程序中创建一个 razor 组件，例如 MyMainHeaderBranding.razor.cs，如下所示：

using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout.SideMenu.MainHeader;
using Volo.Abp.DependencyInjection;

namespace LeptonX.DemoApp.Blazor.MyComponents
{
    [ExposeServices(typeof(MainHeaderBranding))]
    [Dependency(ReplaceServices = true)]
    public partial class MyMainHeaderBranding
    {
        public string Name = "我的主标题头品牌标识";
    }
}

主标题头工具栏

主工具栏可以通过使用 ToolbarContributor 类来管理。更多信息请参阅工具栏部分。

如果您需要替换该组件，可以按照以下步骤操作。

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

@using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout.SideMenu.MainHeader
@using Volo.Abp.DependencyInjection

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

@Name

如果您倾向于使用代码后置文件来处理组件的 C# 代码，可以在您的 Blazor 应用程序中创建一个 razor 组件，例如 MyMainHeaderToolbar.razor.cs，如下所示：

using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout.SideMenu.MainHeader;
using Volo.Abp.DependencyInjection;

namespace LeptonX.DemoApp.Blazor.MyComponents
{
    [ExposeServices(typeof(MainHeaderToolbar))]
    [Dependency(ReplaceServices = true)]
    public partial class MyMainHeaderToolbar
    {
        public string Name = "我的主标题头工具栏";
    }
}

顶部菜单组件

顶部菜单布局中使用的组件。

主菜单

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

@using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout.TopMenu.Navigation;
@using Volo.Abp.DependencyInjection

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

@Name

如果您倾向于使用代码后置文件来处理组件的 C# 代码，可以在您的 Blazor 应用程序中创建一个 razor 组件，例如 MyMainMenu.razor.cs，如下所示：

using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout.TopMenu.Navigation;
using Volo.Abp.DependencyInjection;

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

主菜单项

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

@using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout.TopMenu.Navigation;
@using Volo.Abp.DependencyInjection

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

@Name

如果您倾向于使用代码后置文件来处理组件的 C# 代码，可以在您的 Blazor 应用程序中创建一个 razor 组件，例如 MyMainMenuItem.razor.cs，如下所示：

using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout.TopMenu.Navigation;
using Volo.Abp.DependencyInjection;

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

移动端导航栏

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

@using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout.TopMenu.Navigation;
@using Volo.Abp.DependencyInjection

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

@Name

如果您倾向于使用代码后置文件来处理组件的 C# 代码，可以在您的 Blazor 应用程序中创建一个 razor 组件，例如 MyMobileNavbar.razor.cs，如下所示：

using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout.TopMenu.Navigation;
using Volo.Abp.DependencyInjection;

namespace LeptonX.DemoApp.Blazor.MyComponents
{
    [ExposeServices(typeof(MobileNavbar))]
    [Dependency(ReplaceServices = true)]
    public partial class MyMobileNavbar
    {
        public string Name = "我的移动端导航栏";
    }
}

主标题头

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

@using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout.TopMenu.MainHeader
@using Volo.Abp.DependencyInjection

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

@Name

如果您倾向于使用代码后置文件来处理组件的 C# 代码，可以在您的 Blazor 应用程序中创建一个 razor 组件，例如 MyMainHeader.razor.cs，如下所示：

using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout.TopMenu.MainHeader;
using Volo.Abp.DependencyInjection;

namespace LeptonX.DemoApp.Blazor.MyComponents
{
    [ExposeServices(typeof(MainHeader))]
    [Dependency(ReplaceServices = true)]
    public partial class MyMainHeader
    {
        public string Name = "我的主标题头";
    }
}

主标题头品牌标识

应用程序的品牌标识可以通过 IBrandingProvider 进行自定义。更多信息请参阅品牌标识部分。

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

@using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout.TopMenu.MainHeader
@using Volo.Abp.DependencyInjection

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

@Name

如果您倾向于使用代码后置文件来处理组件的 C# 代码，可以在您的 Blazor 应用程序中创建一个 razor 组件，例如 MyMainHeaderBranding.razor.cs，如下所示：

using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout.TopMenu.MainHeader;
using Volo.Abp.DependencyInjection;

namespace LeptonX.DemoApp.Blazor.MyComponents
{
    [ExposeServices(typeof(MainHeaderBranding))]
    [Dependency(ReplaceServices = true)]
    public partial class MyMainHeaderBranding
    {
        public string Name = "我的主标题头品牌标识";
    }
}

主标题头工具栏

主工具栏可以通过使用 ToolbarContributor 类来管理。更多信息请参阅工具栏部分。

如果您需要替换该组件，可以按照以下步骤操作。

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

@using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout.TopMenu.MainHeader
@using Volo.Abp.DependencyInjection

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

@Name

如果您倾向于使用代码后置文件来处理组件的 C# 代码，可以在您的 Blazor 应用程序中创建一个 razor 组件，例如 MyMainHeaderToolbar.razor.cs，如下所示：

using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout.TopMenu.MainHeader;
using Volo.Abp.DependencyInjection;

namespace LeptonX.DemoApp.Blazor.MyComponents
{
    [ExposeServices(typeof(MainHeaderToolbar))]
    [Dependency(ReplaceServices = true)]
    public partial class MyMainHeaderToolbar
    {
        public string Name = "我的主标题头工具栏";
    }
}

LeptonX Blazor UI

安装

源代码

自定义

主题

LeptonXThemeBlazorOptions

工具栏

布局

顶部菜单布局

侧边菜单布局

自定义页脚部分

通用组件

面包屑导航

内容工具栏

通用设置

移动端通用设置

侧边菜单组件

主菜单

主菜单项

移动端导航栏

主标题头

主标题头品牌标识

主标题头工具栏

顶部菜单组件

主菜单

主菜单项

移动端导航栏

主标题头

主标题头品牌标识

主标题头工具栏

在本文档中