如何使用css设计vaadin组件?

thigvfpy  于 2021-07-06  发布在  Java
关注(0)|答案(1)|浏览(327)

我得到一个vaadin项目,看起来像这样:

package com.example.myapplication;

import com.vaadin.annotations.StyleSheet;
import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.shared.ui.label.LabelState;
import com.vaadin.ui.Button;
import com.vaadin.ui.Grid;
import com.vaadin.ui.Label;

@StyleSheet ("stylesheet.css")

@Theme("mytheme")
public class MyUI extends UI {

    private static final long serialVersionUID = 1L;

    @Override
    protected void init(VaadinRequest vaadinRequest) {
            Label lb = new Label("VAADIN PROJECT");
            lb.setStyleName("mystyle");
            layout.addComponent(lb);
            setContent(layout);

    }
    @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
    @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
    public static class MyUIServlet extends VaadinServlet {
    }
}

以及与主文件位于同一目录中的.css文件:

.mystyle {
    color: red;
    font-size: 180px;
    pading-left: 30px;
}

当我试图运行项目时,它只打印文本,没有更多的更改。我该怎么修?我的结果

w1e3prcc

w1e3prcc1#

你可以看看瓦丁的基本入门。它为整体视图导入一个css文件,为特定视图导入一个css文件。
你看得出来 HelloWorldView 有注解 @CssImport("./styles/views/helloworld/hello-world-view.css") . 这将导致仅为此视图导入css文件。
班级 MainView 形成其他视图的父视图/边框。它还导入一个具有特定属性的css文件 MainView 带注解 @CssImport("./styles/views/main/main-view.css") .
相应的文件可以在 frontend 应用程序的文件夹。

相关问题