css - 在带注释的 7.5 Vaadin 中悬停时，如何使面板更改背景颜色？

Question

我正在开发一个带有注释 servlet 配置的 Vaadin 7.5.3 元素。

我的主要 UI 类是:

@Title("Forms")
@Theme("valo")
public class FormsUI extends UI {

    Panel container = new Panel();

    @Override
    protected void init(VaadinRequest vaadinRequest) {
        configureComponents();
        buildLayout();
    }


    private void configureComponents() {

    }

    private void buildLayout() {
        setContent(container);
    }


    @WebServlet(urlPatterns = "/*")
    @VaadinServletConfiguration(ui = FormsUI.class, productionMode = false)
    public static class FormsServlet extends VaadinServlet {

    }
}

我的 POM(不完整)是:

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <failOnMissingWebXml>false</failOnMissingWebXml>
        <vaadin.version>7.5.3</vaadin.version>
        <vaadin.plugin.version>${vaadin.version}</vaadin.plugin.version>
    </properties>

    <repositories>
        <repository>
            <id>vaadin-addons</id>
            <url>http://maven.vaadin.com/vaadin-addons</url>
        </repository>
    </repositories>

    <dependencies>
        <dependency>
            <groupId>com.vaadin</groupId>
            <artifactId>vaadin-server</artifactId>
            <version>${vaadin.version}</version>
        </dependency>
        <dependency>
            <groupId>com.vaadin</groupId>
            <artifactId>vaadin-client-compiled</artifactId>
            <version>${vaadin.version}</version>
        </dependency>
        <dependency>
            <groupId>com.vaadin</groupId>
            <artifactId>vaadin-themes</artifactId>
            <version>${vaadin.version}</version>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>3.0.1</version>
            <scope>provided</scope>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.2</version>
                <configuration>
                    <source>1.8</source>
                    <target>1.8</target>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.eclipse.jetty</groupId>
                <artifactId>jetty-maven-plugin</artifactId>
                <version>9.2.3.v20140905</version>
            </plugin>
        </plugins>
    </build>

差不多就这些了。所以整个 CSS(valo 主题)是在 vaadin-themes 依赖项中定义的(我相信)。

我想做的是在我的鼠标悬停在面板上时更改面板(或者实际上是任何组件)的背景颜色。纯 CSS super 简单。

我在网上找到的每个示例都表明我可以添加自定义 CSS 类。但是我在哪里定义它们呢？如何加载它们？

感谢建议。

谢谢

Answer 1

在您的 UI 类中使用注释 @Theme("valo")，您可以定义将使用的主题(读取 CSS 样式)。

为了能够拥有自己的 CSS 样式，您可以从 valo 主题继承它，然后在 scss 文件中定义您自己的 CSS 样式。

构建过程将 scss 文件编译成 css 文件。

因此您定义了 @Theme("mytheme") 而不是 valo 主题。然后在 VAADIN/themes/mytheme 文件夹中放置从 valo 主题继承的 scss 文件。

book of vaadin对此有更多详细信息。