Вертикальная или горизонтальная линейка в Vaadin Flow

Я хочу визуально отделить одну область макета от другой в моем макете Vaadin Flow с помощью Java API.

Мне нужно что-то вроде hr горизонтального правила в HTML. Мне также нужен эквивалент, вертикальное правило (которое никогда не определялось в HTML).

Есть ли простой способ получить визуальный индикатор тематического сдвига между частями макета?


vaadin vaadin-flow horizontal-line
person Basil Bourque    schedule 18.12.2018    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Hr класс

Для <hr> существует _3 _ класс.

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 скажет ему взять полный размер контейнера в перпендикулярном направлении.

person Erik Lumme    schedule 18.12.2018
comment
Похоже, хорошее решение. Можете ли вы сделать его причудливым, сужая или уменьшая линию на каждом конце, для чего-то вроде эффекта, наблюдаемого в этом страница с градиентными границами? - person Basil Bourque; 18.12.2018
comment
классный пользовательский класс Divider, мне нравится, как он работает как вертикальный, так и горизонтальный разделитель! @BasilBourque да, это возможно, установив _1 _ на linear-gradient на 135 или -45 градусов, вместо того, чтобы устанавливать цвет фона, как это сделано в этом ответе, или стилизовать границу, как это сделано в вашей ссылке. Тестировал в приложении Vaadin, работает отлично. Я обязательно воспользуюсь этим разделителем! - person kscherrer; 20.12.2018
comment
@Cashbee Можете ли вы опубликовать пример вашего подхода в качестве другого ответа? - person Basil Bourque; 20.12.2018

arrow_upward
3
arrow_downward

Я пишу этот ответ как продолжение моего комментария к ответу Tazavoo, и это здорово! Мне нравится их собственный класс Divider, и меня спросили, можно ли настроить / стилизовать этот разделитель, как это сделано в граница страницы с градиентом.

Конечно, этот разделитель можно стилизовать и дальше! Но разница между разделителем и элементами в ссылке заключается в том, что в ссылке используется стиль границ элемента, в то время как здесь нам нужно стилизовать сам элемент.

Атрибут CSS на связанной странице: border-image. Атрибут CSS для разделителя background-image.

(Я недостаточно знаком с атрибутами CSS -webkit, поэтому не знаю, нужно ли вам больше, чем просто background-image для хорошей визуализации во всех браузерах)

Связанная страница заставляет линейный градиент двигаться в направлении to bottom. Мы могли бы использовать это тоже, но тогда использование разделителя по горизонтали будет отличаться от его использования по вертикали. Вот почему нам нужно установить направление по диагонали, чтобы оба использования разделителя имели одинаковый градиент. См. подтверждение концепции в редакторе TryIt Editor от 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
Все кредиты класса делителя принадлежат @Tazavoo. Пожалуйста, проголосуйте за их ответ

person kscherrer    schedule 21.12.2018