时间戳

首页 > 解决方案 > Vaadin Flow 中的垂直或水平标尺

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

问题描述

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

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

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

标签： vaadinvaadin-flowhorizontal-line

解决方案

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

推荐阅读