vaadin - Vaadin Flow 中的垂直或水平标尺

Question

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

我想要 hr horizontal rule 之类的东西在 HTML 中找到。我还想要等效的垂直规则(从未在 HTML 中定义)。

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

Answer 1

Hr类

对于 <hr>有 Hr 类(class)。

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