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

Question

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

我的主要UIclass是：

@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.

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

感谢建议。

谢谢

Answer 1

通过 UI class 中的注释 @Theme("valo")，您可以定义要使用的主题（阅读 CSS 样式）。

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

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

所以你定义 @Theme("mytheme") 而不是 valo 主题。然后在 VAADIN/themes/mytheme 文件夹中放置继承自 valo 主题的 scss 文件。

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

Answer 2

对于那些疑惑的人，我终于解决了这个问题。我不是 CSS 人，我对 SASS.

的了解更少

无论如何，我所做的是从我的 target/myapp-1.0-SNAPSHOT 中提取 vaadin-themes-7.5.3 文件夹（或者你爆炸的 war 所在的任何地方）并将其复制到 src/main/webapp.

然后，我在../webapp/VAADIN/themes/mytheme下新建了一个文件夹。

在mytheme下，我删除了所有内容，除了：

favicon.ico
styles.scss

然后我创建了：

mytheme.scss

里面styles.scss，我换成了：

@import "mytheme.scss";

.mytheme {
    @include mytheme;
}

里面mytheme.scss，我替换成：

$v-background-color: #777;

@import "../valo/valo.scss";

@mixin mytheme {
    @include valo;
}

效果很好。

我现在至少可以开始添加自定义 CSS 规则了。

希望这对某人有所帮助。

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

How can I make a Panel change background color while hovering in annotated 7.5 Vaadin?

css

vaadin

mousehover

vaadin7