项目

LeptonX 主题模块

您必须持有 ABP 团队或更高级别的许可证 方可使用此主题。

LeptonX 主题是为 ABP 打造的一款专业主题。

  • 访问 LeptonX 主题网站:<https://leptontheme.com/。>
  • 查看在线演示,亲身体验:<https://x.leptontheme.com/。>

亮点

  • 基于 Bootstrap 5 库构建。
  • 100% 兼容 Bootstrap 5 的 HTML 结构和 CSS 类。
  • 响应式设计,兼容移动设备。
  • 提供多种风格,如暗色、深色和浅色。

以下是主题浅色风格的截图:

lepton-x-主题-浅色

查看所有主题风格,并创建演示以体验其效果

如何安装

LeptonX 主题模块已预安装在 启动模板 中。因此,无需手动安装。

软件包

此模块遵循 模块开发最佳实践指南,由多个 NuGet 和 NPM 软件包组成。若想了解这些软件包及其之间的关系,请参阅该指南。

NuGet 软件包

  • Volo.Abp.AspNetCore.Components.Server.LeptonXTheme
  • Volo.Abp.AspNetCore.Components.Web.LeptonXTheme
  • Volo.Abp.AspNetCore.Components.WebAssembly.LeptonXTheme
  • Volo.Abp.AspNetCore.LeptonX.Shared
  • Volo.Abp.AspNetCore.Mvc.UI.Theme.LeptonX

NPM 软件包

  • @volo/abp.aspnetcore.mvc.ui.theme.leptonx
  • @volo/aspnetcore.components.server.leptonxtheme

Angular

  • @volo/abp.ng.lepton-x.core
  • @volo/ngx-lepton-x.core
  • @volosoft/abp.ng.theme.lepton-x
  • @volosoft/ngx-lepton-x

用户界面

LeptonX 主题模块本身不提供任何 UI 页面。它仅改变应用程序现有的 UI 页面。以下是一些示例页面:

登录页面

lepton-主题模块-登录页面

语言页面

lepton-主题模块-语言页面

页面

此模块未定义任何页面。

Identity 模块设置界面

LeptonX 主题模块在设置页面中添加了一个新选项卡,用于在运行时自定义行为。

lepton-主题模块-设置页面

内部结构

设置

LeptonX 模块未定义任何设置。

权限

LeptonX 模块未定义任何权限。

源代码

您可以使用以下 CLI 命令下载源代码:

abp get-source Volo.Abp.LeptonXTheme

如果您使用的是旧版 ABP CLI,可以使用命令:abp get-source Volo.Abp.LeptonXTheme.Pro

如果您想下载预览版的源代码,可以使用以下命令:

abp get-source Volo.Abp.LeptonXTheme --preview

您可以通过 --version 参数下载特定版本的源代码。有关其他可能的选项,请参阅 ABP CLI 文档

ABP 客户还可以从 https://abp.io/api/download/samples/leptonx-demo 下载 https://x.leptontheme.com/ 的源代码。

为了理解 LeptonX 源代码的结构并能够从源代码构建,您可以查阅 LeptonX 源代码文档

LeptonX 主题定制

您可以使用以下链接查看针对不同 UI 类型的定制说明:

在本文档中