在 Vaadin 13 及更高版本中参与 "Lumo compact mode"，以获得更小的布局

Question

Vaadin 13 的发行说明包含 Lumo compact mode 的项目。那里的提及很简短，缺乏细节。引用:

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 网络应用程序中打开此紧凑模式？

Answer 1

添加两个注释：`@JsModule` & `@Theme`

我在本教程中找到了更多文档，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)

引用教程：

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 属性列表，请参阅教程中第一个 link：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.

将其组合成一个演示 class。我们正在修改 Vaadin.com project starters page 在新项目中生成的 MainView class，适用于 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 );
    }
}

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

我不清楚您是否需要注释每个 UI class 还是只注释 MainView.java。我猜你必须注释每个 UI class.

在 Vaadin 13 及更高版本中参与 "Lumo compact mode"，以获得更小的布局

Engage "Lumo compact mode" in Vaadin 13 and later, for smaller size layouts

css

java

layout

vaadin

vaadin-flow

添加两个注释：`@JsModule` & `@Theme`

在 Vaadin 13 及更高版本中参与 "Lumo compact mode"，以获得更小的布局

Engage "Lumo compact mode" in Vaadin 13 and later, for smaller size layouts

css

java

layout

vaadin

vaadin-flow

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

添加两个注释：`@JsModule` & `@Theme`