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作为css中的类名。

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

但无所事事，颜色保持不变，从未改变过。

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

现在，我怎样才能改变我的背景颜色？

Answer 1

听起来你走在正确的轨道上。我在你的css中注意到你没有用半冒号结束背景颜色。（可能只是输入错误）。

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

<强> Vaadin ...

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

同时检查您在生产模式中不 ...

当Vaadin应用程序处于开发模式时，它会执行SCSS - ＆gt;请求styles.css且文件不存在时自动进行CSS编译。在生产模式中，这不会发生。如果styles.css存在，则无论模式如何，都使用该文件，并且没有SCSS - ＆gt; CSS编译

更改布局的背景颜色 - Vaadin

1 个答案: