3

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

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

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

4

2 回答 2

6

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全尺寸。

于 2018-12-18T07:08:26.580 回答
3

我写这个答案是我对 Tazavoo 答案的评论的后续，这太棒了！我喜欢他们的自定义 Divider 类，有人问这个分隔线是否可以进一步自定义/样式化，就像在这个渐变边框页面中所做的那样。

当然，这个分隔线可以进一步设计！但是分隔线和链接中的元素的区别在于，在链接中，元素的边框是样式化的，而我们需要在此处设置实际元素本身的样式。

链接页面中的 CSS 属性：border-image. Divider 的 CSS 属性background-image。

（我对 CSS -webkit 属性不够熟悉，所以我不知道您是否需要的不仅仅是background-image在所有浏览器中获得良好的可视化）

链接页面使线性渐变方向to bottom。我们也可以使用它，但是水平使用 Divider 与垂直使用它看起来会有所不同。这就是为什么我们需要将方向设置为对角线，因此分隔线的两种用法都具有相似的梯度。在 w3schools 的 TryIt 编辑器中查看概念证明

以下是我如何使用渐变设置 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更多内容，请参阅w3schools 上的文档
分隔类的所有学分都转到 @Tazavoo。请去投票他们的答案

于 2018-12-21T08:09:41.730 回答