より小さいサイズのレイアウトのために、後Vaadin 13における「LUMOコンパクトモード」を係合し

バジルボーク:

Vaadin 13のリリースノートをするための項目含むLUMOコンパクトモードそこに言及は詳細を欠いている、簡単です。引用すると:

サイジングのためのコンパクトなテーマ/プリセット定義値及び間隔特性が良好画面上のコンテンツを大量に適合するようにコンポーネントに必要な視空間を減少させます。これは、LUMOのみの機能だとアプリケーションへのプリセットファイルをインポートすることで有効にすることができます。

どのように私は自分のVaadin 14のWebアプリで、このコンパクトモードをオンにしていますか?

バジルボーク:

2つの注釈を追加します。@JsModule@Theme

私はこのチュートリアル、上もう少しドキュメントを見つけテーマとVaadinでスタイリング Vaadin.comサイト上Jouni Koivuviitaにより、。参照を使用するグローバルコンパクト>バリアント

3つの輸入を追加します。

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

2つの注釈を追加します。

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

チュートリアルを引用します。

技術的には、追加<style>の新しい値に設定ページに要素をサイジングし、CSSプロパティを間隔LUMOをあなたはできるソースコードから値を表示します

影響を受けたCSSプロパティのリストを含む、より技術的な詳細については、チュートリアルでは、最初のリンクを参照してください。コンパクトプリセットにおけるLUMOのスタイルは、サイトをデモ。そして、その第2のリンクにGitHubのページを実際のコードを参照してください。vaadin-LUMO-スタイル/プリセット/ 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のモハーベ10.14.6上のMicrosoftエッジV 80.0.361.57クライアントへの組み込みのJettyサーバで実行している場合、ここでの結果です。

2つのブラウザウィンドウを示す上記のコードのスクリーンショットは、それぞれが有するとウィジェットとそれらの間隔の両方の結果として生じる減少を示す上記で説明した2つの注釈なしでレンダリング。

私は、あなたは自分のUIクラスや一人一人に注釈を付ける必要があるかどうかについては明らかではありませんよMainView.java私はあなたがすべてのUIクラスに注釈を付ける必要がありますよね。

おすすめ

転載: http://43.154.161.224:23101/article/api/json?id=4060&siteId=1