Vaadin Flow 中的垂直或水平规则

Question

我想使用 Java API 在我的 Vaadin Flow 布局中直观地将布局的一个区域与另一个区域分开。

我想要一些类似于HTML 中的hr水平规则的东西。我还想要等效的垂直规则（从未在 HTML 中定义）。

是否有一些简单的方法可以直观地指示布局各部分之间的主题转换？

Answer 1

Hr 班级

对于一个<hr>有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-selfandflex仅适用于 flex 布局，其中包括HorizontalLayout和VerticalLayout。这种方法的美妙之处在于同一个类可以在两者中工作。将flex: 0 0 2px告诉它要宽2个像素在所述容器的方向上，而不是增长或收缩。该align-self: stretch会告诉它采取容器的全尺寸在垂直方向上。