Vaadin Flow 中的垂直或水平规则

Question

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

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

是否有一些简单的方法可以让视觉指示器显示布局各部分之间的主题转换？

Answer 1

`Hr` class

对于 <hr> 有 Hr class。

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

自己动手

另一种选择是为分隔线创建 classes，有几种不同的方法可以做到这一点，这里有一个例子

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。这种方法的美妙之处在于相同的 class 将适用于两者。 flex: 0 0 2px 告诉它在容器的方向上有 2 个像素宽，并且不会变大或变小。 align-self: stretch 会告诉它在垂直方向上取容器的完整尺寸。

Answer 2

我写这个答案作为我对 Tazavoo 的回答的评论的后续，这太棒了！我喜欢他们的定制分频器 class，有人问这个分频器是否可以 customized/styled 更进一步，类似的事情在 this gradient borders page 中完成。

当然可以进一步设计此分隔线！但是分隔符和link中的元素的区别在于，在link中，元素的borders是样式化的，而我们需要样式化此处为实际元素。

CSS linked 页面中的属性：border-image。 CSS 分隔符的属性 background-image。

（我对 CSS -webkit 属性不够熟悉，所以我不知道您是否需要 background-image 以外的东西才能在所有浏览器中实现良好的可视化效果）

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

以下是我如何使用渐变设置分隔线 class：

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
_{分频器的所有学分class归于@Tazavoo。请为他们的答案投票}

Vaadin Flow 中的垂直或水平规则

Vertical or horizontal rule in Vaadin Flow

horizontal-line

vaadin

vaadin-flow

`Hr` class

自己动手

Vaadin Flow 中的垂直或水平规则

Vertical or horizontal rule in Vaadin Flow

horizontal-line

vaadin

vaadin-flow

Hr class

自己动手

`Hr` class