Вертикальная или горизонтальная линейка в Vaadin Flow
Я хочу визуально отделить одну область макета от другой в моем макете Vaadin Flow с помощью Java API.
Мне нужно что-то вроде hr горизонтальная линейка, найденного в HTML. Мне также нужен эквивалент, вертикальное правило (которое никогда не определялось в HTML).
Есть ли простой способ получить визуальный индикатор тематического сдвига между частями макета?
Ответы 2
Hr класс
verticalLayout.add(new Span("First"), new Hr(), new Span("Second"));
Самостоятельная работа
Другой вариант - создать классы для разделителей, есть несколько разных способов сделать это, вот пример
public class Divider extends Span {
public Divider() {
getStyle().set("background-color", "blue");
getStyle().set("flex", "0 0 2px");
getStyle().set("align-self", "stretch");
}
}
И используется как таковой
horizontalLayout.add(new Span("First"), new Divider(), new Span("Second"));
Использование align-self и flex будет работать только в гибких макетах, включая HorizontalLayout и VerticalLayout. Прелесть этого подхода в том, что один и тот же класс будет работать в обоих. flex: 0 0 2px сообщает, что его ширина должна составлять 2 пикселя в направлении контейнера, а не увеличиваться или уменьшаться. align-self: stretch скажет ему взять полный размер контейнера в перпендикулярном направлении.
классный пользовательский класс Divider, мне нравится, как он работает как вертикальный, так и горизонтальный разделитель! @BasilBourque да это возможно, установив для background-image линейный градиент на 135 или -45 градусов, вместо того, чтобы устанавливать цвет фона, как это сделано в этом ответе, или стилизовать границу, как это сделано в вашей ссылке. Тестировал в приложении Vaadin, работает отлично. Я обязательно воспользуюсь этим разделителем!
@Cashbee Можете ли вы опубликовать пример вашего подхода в качестве другого ответа?
Я пишу этот ответ как продолжение моего комментария к ответу Tazavoo, и это здорово! Мне нравится их собственный класс Divider, и меня спросили, можно ли настроить / стилизовать этот разделитель, как это сделано в эта страница градиента границы.
Конечно, этот разделитель можно стилизовать и дальше! Но разница между разделителем и элементами в ссылке заключается в том, что в ссылке используется стиль границы элемента, в то время как здесь нам нужно стилизовать сам элемент.
Атрибут CSS на связанной странице: border-image. Атрибут CSS для разделителя background-image.
(Я недостаточно знаком с атрибутами CSS -webkit, поэтому не знаю, нужно ли вам больше, чем просто background-image для хорошей визуализации во всех браузерах)
Связанная страница заставляет линейный градиент двигаться в направлении to bottom. Мы могли бы использовать и это, но тогда использование разделителя по горизонтали будет отличаться от его использования по вертикали. Вот почему нам нужно установить направление по диагонали, чтобы оба использования разделителя имели одинаковый градиент. См. Подтверждение концепции в редакторе TryIt от w3schools.
Вот как я настроил класс Divider с градиентом:
public class Divider extends Span {
public Divider(){
getStyle().set("background-image", "linear-gradient(135deg, #777 , rgba(0, 0, 0, 0))");
getStyle().set("flex", "0 0 2px");
getStyle().set("align-self", "stretch");
}
}
Чтобы еще больше настроить linear gradient, см. документы по w3schools
All the credits of the divider class go to @Tazavoo. Please go upvote their answer
Похоже, хорошее решение. Можете ли вы сделать его более интересным, сужая или уменьшая длину линии на каждом конце, для чего-то вроде эффекта, наблюдаемого в эта страница градиента границы?