Включите «компактный режим Lumo» в Vaadin 13 и более поздних версиях для макетов меньшего размера - PullRequest
Новая
       67

Включите «компактный режим Lumo» в Vaadin 13 и более поздних версиях для макетов меньшего размера

3 голосов
/ 22 февраля 2020

Примечания к выпуску для Vaadin 13 включают элемент для Lumo compact mode . Упоминание там краткое, не хватает деталей. Цитата:

Компактная тема / предустановка определяет значения свойств размеров и интервалов, чтобы уменьшить визуальное пространство, необходимое компонентам, чтобы лучше разместить большой объем контента на экране. Это функция только для Lumo, которую можно включить, импортировав файл предустановки в приложение.

Как включить этот компактный режим в моем веб-приложении Vaadin 14?

1 Ответ

3 голосов
/ 22 февраля 2020

Добавьте две аннотации: @JsModule & @Theme

Я нашел немного больше документации по этому уроку, Темы и стили в Vaadin , от Jouni Koivuviita на сайте Vaadin.com. См. Использование глобальных вариантов> Компакт .

Добавить три импорта: 

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> на странице, который устанавливает новые значения для свойств Lumo sizing and spacing CSS properties . Вы можете просмотреть значения из исходного кода .

Для получения более подробной технической информации, включая список затронутых CSS свойств, см. Первую ссылку в руководстве: Компактная предустановка на демонстрационном сайте стилей Lumo . И посмотрите фактический код во второй ссылке на странице GitHub: vaadin-lumo-styles / presets / compact. html.

Поместите это в демонстрационный класс. Мы модифицируем класс MainView, сгенерированный в новом проекте стартовой страницей проекта Vaadin.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 );
    }
}

Вот результат при работе с встроенный сервер Jetty в клиент Microsoft Edge v 80.0.361.57 в macOS Mojave 10.14.6.

Screenshot of the above code showing two browser windows, each rendered with and without the two annotations discussed above showing the resulting decrease of both the widgets and their spacing.

Мне не ясно, нужно ли аннотировать каждый из ваших классов пользовательского интерфейса или просто MainView.java. Я думаю, вы должны аннотировать каждый класс пользовательского интерфейса.

...