3.5.9.4. 使用应用程序组件中的主题
如果项目包含带有自定义主题的应用程序组件,则可以将此主题用于整个项目。
要按原样继承主题,只需将其添加到cuba.themeConfig应用程序属性:
cuba.web.theme = {theme-name}
cuba.themeConfig = com/haulmont/cuba/hover-theme.properties /com/company/{app-component-name}/{theme-name}-theme.properties
如果要覆盖父主题中的某些变量,则首先需要在项目中创建主题扩展。
在下面的例子中,我们将使用创建自定义主题部分中的 facebook
主题。
按照步骤为应用程序组件创建
facebook
主题。使用 Studio 菜单安装应用程序组件,如应用程序组件示例部分所述。
在使用应用程序组件的项目中扩展
halo
主题。通过 IDE,将
themes
目录下的所有文件名中的halo
重命名为facebook
,以获得以下结构:themes/
facebook/
branding/
app-icon-login.png
app-icon-menu.png
com.company.application/
app-component.scss
facebook-ext.scss
facebook-ext-defaults.scss
favicon.ico
styles.scss
app-component.scss
文件合并应用程序组件的主题修改。在 SCSS 构建过程中,Gradle 插件会自动查找应用程序组件并将其导入生成的modules/web/build/themes-tmp/VAADIN/themes/{theme-name}/app-components.scss
文件中。默认情况下,
app-component.scss
不包含来自{theme-name}-ext-defaults
的变量改动。要包含变量改动到 app 组件包,需要在app-component.scss
中手动导入:@import "facebook-ext";
@import "facebook-ext-defaults";
@mixin com_company_application {
@include com_company_application-facebook-ext;
}
在这个阶段,
facebook
主题已经从 app 组件导入到项目中。现在,可以使用
com.company.application
包中的facebook-ext.scss
和facebook-ext-defaults.scss
文件覆盖 app 组件主题中的变量,并为具体项目自定义变量。将以下属性添加到
web-app.properties
文件中,以使应用程序的 Settings 菜单中的facebook
主题可用。使用相对路径从 app 组件引用facebook-theme.properties
。cuba.web.theme = facebook
cuba.themeConfig = com/haulmont/cuba/hover-theme.properties /com/company/{app-component-name}/facebook-theme.properties
如果主题构建有任何问题,请检查 |