Vaadin Flow中的垂直或水平尺

Question

我想使用Java API在我的Vaadin Flow布局中从视觉上将布局的一个区域与另一个区域分开。

我想要类似HTML中的hr horizontal rule之类的东西。我还需要等效的垂直规则（从未在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-self和flex仅适用于包含HorizontalLayout和VerticalLayout的伸缩布局。这种方法的优点在于，同一类将在两者中都起作用。 flex: 0 0 2px告诉它在容器方向上的宽度为2像素，并且不会增长或缩小。 align-self: stretch会告诉它在垂直方向上获取容器的完整大小。

Answer 2

我写这个答案作为对Tazavoo答案的评论的后续，这太好了！我喜欢他们的自定义Divider类，有人问过是否可以进一步自定义/设置其样式，就像在this gradient borders page中所做的那样。

当然，可以进一步设置分隔符的样式！但是分隔符和链接中的元素之间的区别在于，在链接中，元素的 borders 带有样式，而我们需要在此处设置实际元素本身的样式。

链接页面中的

CSS属性：border-image。除法器background-image的CSS属性。

（我对CSS -webkit属性非常不熟悉，所以我不知道您是否需要超过background-image才能在所有浏览器中获得良好的可视化效果）

---

链接的页面使线性渐变沿to bottom方向移动。我们也可以使用它，但是水平使用Divider与垂直使用Divider看起来会有所不同。这就是为什么我们需要将方向设置为对角线的原因，因此分隔线的两种用法都具有相似的梯度。 See proof of concept in w3schools' TryIt Editor

这是我用渐变设置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，请参见docs on w3schools
_{除法器类的所有学分归@Tazavoo所有。请赞成他们的答案}