css - Vaadin 8 Web 应用程序中的大标签作为标题

Question

我需要一段较大的文本用作标题，以使用Valo主题在 Vaadin 8 应用程序中标记表单的各个部分。

在以前的 Vaadin 版本中，我记得使用Label我以某种方式分配了预定义的“H1”样式（如 HTML“h1”标签），其中该样式是Reindeer主题的一部分。

Label::addStyleName我通过调用和传递常量在 Vaadin 8 中尝试并失败了ValoTheme.LABEL_H1。

Answer 1

是的，确实，根据 Morfic 的评论，调用addStyleName并传递Label常量确实有效。ValoTheme.LABEL_H1

final Label labelPlain = new Label ( "This is a plain Label in Vaadin 8.1.0 Alpha 6." );
final Label labelH1 = new Label ( "This is a 'h1' Label in Vaadin 8.1.0 Alpha 6." );
labelH1.addStyleName ( ValoTheme.LABEL_H1 );

这是一个完整的示例应用程序，根据Vaadin 8.1.0 Alpha 6 中的常见Vaadin 原型进行了修改。 vaadin-archetype-application

package com.example.try_h1;

import javax.servlet.annotation.WebServlet;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.Button;
import com.vaadin.ui.Label;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.themes.ValoTheme;

/**
 * This UI is the application entry point. A UI may either represent a browser window
 * (or tab) or some part of a html page where a Vaadin application is embedded.
 * <p>
 * The UI is initialized using {@link #init(VaadinRequest)}. This method is intended to be
 * overridden to add component to the user interface and initialize non-component functionality.
 */
@Theme ( "mytheme" )
public class MyUI extends UI {

    @Override
    protected void init ( VaadinRequest vaadinRequest ) {
        final VerticalLayout layout = new VerticalLayout ( );

        final Label labelPlain = new Label ( "This is a plain Label in Vaadin 8.1.0 Alpha 6." );
        final Label labelH1 = new Label ( "This is a 'h1' Label in Vaadin 8.1.0 Alpha 6." );
        labelH1.addStyleName ( ValoTheme.LABEL_H1 );

        layout.addComponents ( labelPlain, labelH1 );

        setContent ( layout );
    }

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

运行该示例应用程序的屏幕截图。

addStyleName相对setStyleName

小心调用addStyleName而不是setStyleName. 第二个清除所有现有样式，替换为您的一种样式参数。这不是您想要的，因为您将丢失 Vaadin 框架分配的所有现有样式。