Question

所以，关于这个问题。我使用Vaadin 7.4.3。我想使用声明性用户界面，但我没有使用CSS的正确方法。

例如，我有带有映射的MainView.html文件：

<!DOCTYPE html>
<html>
    <head>
        <meta name="package-mapping" content="auth:my.widget.package.web.main.auth" />
        <link href="./styles/common.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <v-vertical-layout size-full style-name="marginTop">
            <auth-login-panel :right/>
        </v-vertical-layout>
   </body>
</html>

Java映射：

@Theme("valo")
@Widgetset("my.package.MyAppWidgetset")
public class MainView extends UI {

    @WebServlet(value = "/*", asyncSupported = true)
    @VaadinServletConfiguration(productionMode = false, ui = MainView.class)
    public static class Servlet extends VaadinServlet {
    }

    @Override
    protected void init(VaadinRequest request) {
       DesignContext context =   Design.read(getClass().getResourceAsStream("MainView.html"), null);
       setContent(context.getRootComponent());
    }
}

用于测试的简单CSS（common.css）：

#marginTop {
    margin-top: 20px;
}

.marginTop {
   margin-top: 20px;
}

但是... css不起作用。有什么想法吗？

Answer 1

你不应该像这样附加css样式表。你应该把你的CSS放在一个主题中。

好的方法是将自定义主题创建为现有Vaadin主题的扩展，例如Valo或Reindeer，然后只添加调整应用程序所需的自定义样式。 vaadin书中有一个很棒的部分专门用于Creating and using themes和How to create a theme in Eclipse。还有一篇关于Creation of Sass Themes的Vaadin Wiki帖子。

此外，通过更改定义颜色，边距等的一些预定义变量的值，可以非常简单地调整Valo主题。您可以找到示例here。

$v-app-loading-text: "Dark & Flat Valo";

$v-background-color: #000;
$v-focus-color: #ffa500;
$v-font-size: 15px;
$v-font-weight: 600;
$v-unit-size: 42px;
$v-bevel: false;
$v-shadow: false;
$v-gradient: false;
$v-textfield-bevel: false;
$v-textfield-shadow: false;
$v-border-radius: 0;
$v-border: 2px solid v-tone;
$v-overlay-shadow: 0 0 0 2px (v-tint 10);
$v-focus-style: $v-focus-color;
$v-font-family: "Lato", sans-serif;
$v-font-weight--header: 600;

@import "../valo/valo";

使用CSS的Vaadin声明UI

1 个答案: