启用"Lumo紧凑模式"在Vaadin 13及更高版本中，适用于较小尺寸的布局 [英] Engage "Lumo compact mode" in Vaadin 13 and later, for smaller size layouts

问题描述

Vaadin 13的发行说明包括 Lumo紧凑模式 .这里提到的内容简短，缺乏细节.引用:

The release notes for Vaadin 13 includes an item for Lumo compact mode. The mention there is brief, lacking details. To quote:

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

The compact theme/preset defines values for the sizing and spacing properties to reduce the visual space required by components to better fit a large amount of content on the screen. It’s a Lumo-only feature and can be enabled by importing the preset file to the application.

如何在Vaadin 14 Web应用程序中打开此紧凑模式?

How do I turn on this compact mode in my Vaadin 14 web app?

推荐答案

添加两个注释:@JsModule& @Theme

我在本教程中找到了更多文档， Joad Koivuviita在Vaadin.com网站上撰写的Vaadin中的主题和样式 .请参见使用全局变量>紧凑型.

Add two annotations: @JsModule & @Theme

I found a bit more documentation on this tutorial, Themes and styling in Vaadin, by Jouni Koivuviita on the Vaadin.com site. See Use global variants > Compact.

添加三个导入:

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)

引用本教程:

从技术上讲，它会在页面中添加<style>元素，从而为查看源代码中的值.

Technically, it adds a <style> element to the page which sets new values for the Lumo sizing and spacing CSS properties. You can view the values from the source code.

有关更多技术细节(包括受影响的CSS属性的列表)，请参见教程中的第一个链接:

For more technical detail, including a list of affected CSS properties, see that first link in tutorial: Compact preset in the Lumo styles demo site. And see the actual code in that second link, the GitHub page: vaadin-lumo-styles/presets/compact.html.

将其放到演示类中.我们正在修改Vaadin.com 项目启动器页面在新项目中生成的MainView类，代表Vaadin 14.1.17.

Put that together into a demo class. We are modifying the MainView class generated in a new project by the Vaadin.com project starters page, for Vaadin 14.1.17.

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 );
    }
}

这是将嵌入式Jetty服务器与macOS Mojave 10.14.6上的Microsoft Edge v 80.0.361.57客户端一起运行时的结果.

Here is the result when running with the embedded Jetty server to Microsoft Edge v 80.0.361.57 client on macOS Mojave 10.14.6.

我不清楚您是需要注释每个UI类还是仅注释MainView.java.我猜想您必须注释每个UI类.

I am not clear on whether you need to annotate every one of your UI classes or just the MainView.java. I would guess you must annotate every UI class.

这篇关于启用"Lumo紧凑模式"在Vaadin 13及更高版本中，适用于较小尺寸的布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！