Вертикальное или горизонтальное правило в Vaadin Flow - PullRequest
Новая
       32

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

0 голосов
/ 18 декабря 2018

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

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

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

Ответы [ 2 ]

0 голосов
/ 21 декабря 2018

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

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

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

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

Связанная страница заставляет линейный градиент двигаться в направлении to bottom.Мы тоже можем это использовать, но тогда использование делителя по горизонтали будет выглядеть иначе, чем по вертикали.Вот почему нам нужно установить направление на диагональ, чтобы оба варианта использования делителя имели одинаковый градиент. См. Подтверждение концепции в редакторе TryIt w3schools

Вот как я могу настроить класс делителя с градиентом: 

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.Пожалуйста, проголосуйте за их ответ

0 голосов
/ 18 декабря 2018

Hr класс

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

verticalLayout.add(new Span("First"), new Hr(), new Span("Second"));

Roll-your-own

Другой вариант - создать классы для разделителей, есть несколько различных способов сделать это, вот пример 

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

...