5

既存の Vaadin 8 アプリケーションを Vaadin 12 に移行しようとしていますが、Vaadin 8 の GridLayout の機能を Vaadin 12 で再作成する方法を知る必要があります。

Vaadin Docsによると、Vaadin 12 では GridLayout を次のように置き換えることができ ます。

残念ながら、これがどのように正確に行われるかは完全には明らかではありません。

Vaadin コンポジット"HelloGrid"があると仮定しましょう:

@StyleSheet("styles/hello-grid.css")
public class HelloGrid extends Composite<Div> {

   public HelloGrid(){

     // EDIT: This line is my solution to the question
     getElement().getClassList().add("hello-grid");

     Label labelOne = new Label();
     labelOne.addClassName("label-one");

     Label labelTwo = new Label();
     labelTwo.addClassName("label-two");

     add(labelOne);
     add(labelTwo);
   }
}

css ファイル"hello-grid.css" :

.hello-grid {
    display: grid !important;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
}

.label-one {
    grid-column: 1;
}

.label-two {
    grid-column: 2;
}
  • 「.hello-grid」 css クラスを HelloGrid Compositeに関連付けるにはどうすればよいですか。
  • これは、Vaadin 12でCSSグリッドを使用する正しい/推奨される方法ですか?
4

1 に答える 1

3

少し遅すぎますが、他の誰かの質問に答えるかもしれません。

cssスタイルをどこに配置したかによって異なります。の下に配置することをお勧めします。webapp\frontend\stylesそうすれば、 を使用してアクセスできます@StyleSheet("frontend://styles/hello-grid.css")。公式ドキュメントにも記載されているように、ここではスタイルシートを含む

サーブレット URL に相対

この設定であなたの例を使用してください：スタイルのファイルの場所

およびそれらのようなスタイル（基本的には、スタイルシートに色を追加して確認するだけで機能します）スタイルのファイル内容

これは出力でした： ここに画像の説明を入力

正確なガイドは Vaadin ページにありませんが、どのように Grid スタイルを使用することができますが、このチュートリアルは非常に有望なA Complete Guide to Gridです。それ以外の場合、Vaadin に関して特別なことは何もないはずです。

また、ディレクトリにアドオンがあり、Css Grid Layoutに役立つ可能性があるようです(ただし、自分で試したことはありません)。

于 2019-04-10T12:31:34.103 に答える