更改布局的背景颜色 - Vaadin

Question

在我的一个应用程序中，我创建了一个页脚：

public Footer(){
        hl.setHeight("120px");
        hl.setWidth("100%");
        hl.setMargin(true);
        hl.setSpacing(true);

    VerticalLayout contact = new VerticalLayout();
    Label contact_title = new Label("Contact");
    Label mail = new Label("<a href='mailto:contact@flavien-normand.fr'>Par email</a>",ContentMode.HTML);

    contact.addComponents(contact_title,mail);


    hl.addComponent(contact);               
}

其中 hl = new HorizontalLayout();

此页脚包含在我的主页 (absoluteLayout) 中。但问题是我没有看到我的主要内容和页脚之间的区别，主要是因为它们的背景颜色相同。所以我想更改页脚的背景颜色，这是我尝试的方法：

在代码中添加 hl.addStyleName("backColorGrey"); 并在我的主题 .scss 中添加 .backColorGrey{background-color:#ACACAC}，我尝试使用 .v-horizontallayout-backColorGrey 作为 class 名字在 css.

我也试过 JavaScript.getCurrent().execute("$('.backColorGrey').css('background-color', 'grey')");

但什么都不做，颜色保持不变，从未改变。

尝试 javascript，我尝试发出警报：JavaScript.getCurrent().execute("alert('Hi SO!')"); 但它没有用，我想知道为什么。

那么现在，我该如何更改我的 hl 的背景颜色？

Answer 1

听起来你走对了路。我注意到在您的 css 中您没有以分号结束背景色。（可能只是打字错误）。

可能是您的主题未正确编译。检查您是否在主题中包含了 mixin 定义。

瓦丁...

Footer footer = new Footer();
footer.addStyleName("backColorGrey");

Scss.....

@import "../reindeer/reindeer.scss";

@mixin mytheme{

    @include reindeer;

      .backColorGrey{
           background-color:#ACACAC;
      }

}

您在使用 maven/gradle/ivy 吗？您可能需要在 pom.xml 中添加一个 sass 编译器，请参阅 VAADIN cannot find themes when in productionMode

同时检查您是否未处于生产模式...

When a Vaadin application is in development mode, it does the SCSS -> CSS compilation automatically when styles.css is requested and the file does not exist. In the production mode this does not happen. If styles.css exists, regardless of mode, the file is used and there is no SCSS -> CSS compilation

更改布局的背景颜色 - Vaadin

change background color of a Layout - Vaadin

vaadin