大標籤作爲Vaadin 8 web應用程序的標題

Question

我需要一個較大的文本作爲標題使用Valo主題來標記Vaadin 8應用程序中某個表單的各個部分。

在Vaadin以前的版本，我記得有我在某種程度上分配的「H1」的預定義的樣式（如HTML「H1」的標籤）該風格是馴鹿主題的一部分Label這樣做。

我嘗試過，但未能在Vaadin 8中通過調用Label::addStyleName並傳遞常量ValoTheme.LABEL_H1來做到這一點。

Answer 1

是的，的確如此，在Label上調用addStyleName並且按照Morfic的評論通過常數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阿爾法6.運行示例應用的

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 { 
    } 
} 

截圖從通常Vaadin archetypevaadin-archetype-application修改。