java - 在 Vaadin 13 及更高版本中使用“Lumo 紧凑模式”，以实现更小尺寸的布局

Question

Vaadin 13 的发行说明包括Lumo 紧凑模式的项目。提到的内容很简短，缺乏细节。去引用：

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

如何在我的 Vaadin 14 网络应用程序中打开这种紧凑模式？

标签： javacsslayoutvaadinvaadin-flow

Answer 1

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

我在 Vaadin.com 网站上找到了 Jouni Koivuviita 撰写的有关本教程的更多文档，即Vaadin 中的主题和样式。请参阅使用全局变体 > 紧凑。

添加三个导入：

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)

引用教程：

从技术上讲，它向页面添加了一个元素，该元素为Lumo 大小和间距 CSS 属性<style>设置了新值。您可以查看源代码中的值。

有关更多技术细节，包括受影响的 CSS 属性列表，请参阅教程中的第一个链接：Lumo样式演示站点中的紧凑预设。并查看第二个链接中的实际代码，GitHub 页面：vaadin-lumo-styles/presets/compact.html。

把它放在一个演示类中。我们正在修改MainViewVaadin.com项目启动页面在新项目中生成的类，用于 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 类或只是MainView.java. 我猜你必须注释每个 UI 类。