Как использовать сетку CSS в Vaadin Flow в качестве замены GridLayout в Framework 8? - PullRequest
Новая
       10

Как использовать сетку CSS в Vaadin Flow в качестве замены GridLayout в Framework 8?

0 голосов
/ 29 января 2019

Я пытаюсь перенести существующее приложение Vaadin 8 в Vaadin 12, и мне нужно знать, как воссоздать функциональность GridLayout Vaadin 8 в Vaadin 12.

Согласно Документам Vaadin GridLayout можно заменить в Vaadin 12 на: «Использовать Div вместе с новой функциональностью CSS Grid, которая поддерживается в большинстве браузеров» *

К сожалению, не совсем ясно, как именно это можно сделать.

Допустим, у меня есть композит 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.
  • Является ли это правильным / предпочтительнымспособ использования сетки CSS в Vaadin 12 вообще

1 Ответ

0 голосов
/ 10 апреля 2019

Уже слишком поздно, но, возможно, отвечает на вопрос кого-то другого.

Это зависит от того, где именно вы разместили свои стили css.Я бы предложил разместить под webapp\frontend\styles, тогда вы сможете получить к ним доступ, используя @StyleSheet("frontend://styles/hello-grid.css").Как также отмечено в официальной документации, здесь Включая таблицы стилей это

Относительно URL сервлета

Используя ваш пример с этой настройкой:Style's file location

и подобные им стили (в основном, просто добавив цвета в таблицу стилей, чтобы убедиться, что это работает) Style's file contant

это быловывод: enter image description here

Я не нашел точных руководств на странице Vaadin, как вы могли бы использовать стили сетки, но этот учебник выглядит довольно многообещающе Полное руководство поСетка .В противном случае не должно быть ничего особенного в отношении Vaadin.

Кроме того, похоже, что в каталоге есть надстройка, которая может помочь Css Grid Layout (Через, у меня нетсам попробовал)

...