Angular UI：基础主题

基础主题是Angular UI的主题实现方案。这是一个极简风格的主题，在原生Bootstrap基础上未添加任何额外样式。您可以将基础主题作为基准主题，并基于此构建自己的主题或样式。请参阅自定义章节。

如果您正在寻找专业级、企业就绪的主题，可查看作为ABP组成部分的Lepton主题。

请参阅主题文档了解主题相关知识。

安装指南

如需手动安装此主题，请按以下步骤操作：

将@abp/ng.theme.basic NPM包安装到您的Angular项目中
打开src/app/app.config.ts文件，导入provideThemeBasicConfig（可从@abp/ng.theme.basic包导入），并将provideThemeBasicConfig()添加到providers数组

BASIC_THEME_STYLES_PROVIDERS已注册三种布局组件：ApplicationLayoutComponent、AccountLayoutComponent和EmptyLayoutComponent。这些组件通过@abp/ng.theme.basic包暴露的provideThemeBasicConfig()函数在应用初始化时提供。

应用布局

应用布局除包含上述通用部分外，还实现了以下功能区域：

Logo区域
路由区域
语言选择与用户菜单
页面提示

查看应用布局组件构成：

布局使用指南

应通过调用 RoutesService 的 add 方法将路由添加到菜单。可在路由对象中设置布局。更多信息请参阅修改菜单。

自定义方案

您有两种自定义此主题的选项：

覆盖样式/组件

此方案可继续将主题作为NPM包使用，仅自定义所需部分：

覆盖样式

可直接在应用的全局样式文件（src/styles.scss）中覆盖样式

覆盖组件

请参阅组件替换了解如何替换组件、自定义和扩展用户界面

复制与自定义

可在Angular项目目录中运行以下ABP CLI命令，将源代码复制到您的解决方案：

abp add-package @abp/ng.theme.basic --with-source-code

或者，您也可以下载基础主题源代码，手动将项目内容复制到您的项目（projects/theme-basic文件夹），打开angular.json文件并在projects对象中添加以下配置：

{
    "projects": {
        ...
        "theme-basic": {
            "projectType": "library",
            "root": "projects/theme-basic",
            "sourceRoot": "projects/theme-basic/src",
            "prefix": "abp",
            "architect": {
                "build": {
                    "builder": "@angular-devkit/build-angular:ng-packagr",
                    "options": {
                        "tsConfig": "projects/theme-basic/tsconfig.lib.json",
                        "project": "projects/theme-basic/ng-package.json"
                    },
                    "configurations": {
                        "production": {
                        "tsConfig": "projects/theme-basic/tsconfig.lib.prod.json"
                        }
                    }
                }
            }
        }
    }
}

接着打开tsconfig.json文件，按以下方式添加路径映射：

"paths": {
    ...
    "@abp/ng.theme.basic": ["projects/theme-basic/src/public-api.ts"],
    "@abp/ng.theme.basic/testing": ["projects/theme-basic/testing/src/public-api.ts"]
}

现在您可以根据应用需求自由定制主题。

扩展阅读

主题系统