Java “参与”；“Lumo紧凑模式”；在Vaadin 13及更高版本中，用于较小尺寸的布局

Vaadin 13的发行说明中包括一项。这里提到的内容很简短，缺乏细节。引述：

紧凑主题/预设定义大小和间距属性的值，以减少组件所需的视觉空间，从而更好地适应屏幕上的大量内容。这是一项仅限Lumo的功能，可以通过将预设文件导入应用程序来启用

如何在我的Vaadin 14 web应用程序中打开此压缩模式？

添加两个注释：

@JsModule

&

@Theme

我在Vaadin.com网站上找到了Jouni Koivuviita关于本教程的更多文档。看

添加三个导入：

import com.vaadin.flow.component.dependency.JsModule;
import com.vaadin.flow.theme.Theme;
import com.vaadin.flow.theme.lumo.Lumo;

添加两个注释：

@JsModule ("@vaadin/vaadin-lumo-styles/presets/compact.js")
@Theme ( Lumo.class)

引用本教程：

从技术上讲，它在页面中添加了一个

元素，用于设置新的值。你可以

有关更多技术细节，包括受影响的CSS属性列表，请参阅教程中的第一个链接：在Lumo样式演示站点中。并在第二个链接GitHub页面中查看实际代码：

把这些放在一个演示课上。我们正在修改Vaadin.com在一个新项目中为Vaadin 14.1.17生成的

MainView

类

package work.basil.example;

import com.vaadin.flow.component.Key;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.button.ButtonVariant;
import com.vaadin.flow.component.dependency.CssImport;
import com.vaadin.flow.component.dependency.JsModule;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.select.Select;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.server.PWA;
import com.vaadin.flow.theme.Theme;
import com.vaadin.flow.theme.lumo.Lumo;


/**
 * The main view contains a button and a click listener.
 */
@JsModule ( "@vaadin/vaadin-lumo-styles/presets/compact.js" )
@Theme ( Lumo.class )
@Route ( "" )
@PWA ( name = "Project Base for Vaadin", shortName = "Project Base" )
@CssImport ( "./styles/shared-styles.css" )
@CssImport ( value = "./styles/vaadin-text-field-styles.css", themeFor = "vaadin-text-field" )
public class MainView extends VerticalLayout
{
    enum Animal { DOG, CAT, BIRD, HAMSTER } ;

    public MainView ( )
    {
        // Use TextField for standard text input
        TextField textField = new TextField( "Your name" );

        // Button click listeners can be defined as lambda expressions
        GreetService greetService = new GreetService();
        Button button = new Button( "Say hello" ,
                e -> Notification.show( greetService.greet( textField.getValue() ) ) );

        // Theme variants give you predefined extra styles for components.
        // Example: Primary button is more prominent look.
        button.addThemeVariants( ButtonVariant.LUMO_PRIMARY );

        // You can specify keyboard shortcuts for buttons.
        // Example: Pressing enter in this view clicks the Button.
        button.addClickShortcut( Key.ENTER );

        // Use custom CSS classes to apply styling. This is defined in shared-styles.css.
        this.addClassName( "centered-content" );


        Select < Animal > animalSelect = new Select <>();
        animalSelect.setItems( Animal.values() );
        this.add( animalSelect , new TextField( "Bogus1" ) , new TextField( "Bogus2" ) , new TextField( "Bogus3" ) , new TextField( "Bogus4" ) , textField , button );
    }
}

package work.basil.example；
导入com.vaadin.flow.component.Key；
导入com.vaadin.flow.component.button.button；
导入com.vaadin.flow.component.button.ButtonVariant；
导入com.vaadin.flow.component.dependency.CssImport；
导入com.vaadin.flow.component.dependency.JsModule；
导入com.vaadin.flow.component.notification.notification；
导入com.vaadin.flow.component.orderedlayout.VerticalLayout；
导入com.vaadin.flow.component.select.select；
导入com.vaadin.flow.component.textfield.textfield；
导入com.vaadin.flow.router.Route；
导入com.vaadin.flow.server.PWA；
导入com.vaadin.flow.theme.theme；
导入com.vaadin.flow.theme.lumo.lumo；
/**
*主视图包含一个按钮和一个单击侦听器。
*/
@JsModule（“@vaadin/vaadin-lumo-styles/presets/compact.js”）
@主题（Lumo.class）
@路线（“”）
@PWA（name=“Vaadin的项目基础”，shortName=“项目基础”）
@CssImport（“./styles/shared styles.css”）
@CssImport（value=“./style/vaadin文本字段style.css”，themeFor=“vaadin文本字段”）
公共类主视图扩展了垂直布局
{
列举动物{狗、猫、鸟、仓鼠}；
公共主视图（）
{
//使用文本字段进行标准文本输入
TextField TextField=新的TextField（“您的姓名”）；
//按钮单击侦听器可以定义为lambda表达式
GreetService GreetService=新的GreetService（）；
按钮按钮=新按钮（“打招呼”，
e->Notification.show（greetService.greet（textField.getValue（））；
//主题变体为组件提供预定义的额外样式。
//示例：主按钮的外观更突出。
button.addThemeVariants（ButtonVariant.LUMO_PRIMARY）；
//可以为按钮指定键盘快捷键。
//示例：在此视图中按enter键可单击按钮。
按钮.addClickShortcut（Key.ENTER）；
//使用自定义CSS类应用样式。这在shared-styles.CSS中定义。
此.addClassName（“中心内容”）；
选择animalSelect=newselect（）；
animalSelect.setItems（Animal.values（））；
添加（animalSelect、new TextField（“Bogus1”）、new TextField（“Bogus2”）、new TextField（“Bogus3”）、new TextField（“Bogus4”）、TextField、button）；
}
}

以下是在macOS Mojave 10.14.6上运行嵌入式Jetty服务器到Microsoft Edge v 80.0.361.57客户端时的结果

---

我不清楚您是需要注释每个UI类还是只注释

MainView.java

。我猜您必须注释每个UI类。

有关Lumo主题的前身Valo主题的类似问题，请参阅：。假设

MainView

是您所有视图的父视图，注释

MainView

就足够了。