Vaadin 瓦丁流中的垂直或水平规则_Vaadin_Vaadin Flow_Horizontal Line

Vaadin 瓦丁流中的垂直或水平规则

vaadin

Vaadin 瓦丁流中的垂直或水平规则,vaadin,vaadin-flow,horizontal-line,Vaadin,Vaadin Flow,Horizontal Line,我想使用JavaAPI在我的Vaadin流布局中直观地将布局的一个区域与另一个区域分开我想要类似HTML的东西。我还想要一个等价的垂直规则（从未在HTML中定义）是否有一些简单的方法可以在版面的各个部分之间设置主题转换的视觉指示器？Hrclass 对于，有一个类添加（新Span（“第一”）、新Hr（）、新Span（“第二”）滚你自己的另一个选项是为除法器创建类，有几种不同的方法，下面是一个示例 public class Divider extends Span { publi

我想使用JavaAPI在我的Vaadin流布局中直观地将布局的一个区域与另一个区域分开

我想要类似HTML的东西。我还想要一个等价的垂直规则（从未在HTML中定义）

是否有一些简单的方法可以在版面的各个部分之间设置主题转换的视觉指示器？

Hr

class 对于

，有一个类

添加（新Span（“第一”）、新Hr（）、新Span（“第二”）

滚你自己的另一个选项是为除法器创建类，有几种不同的方法，下面是一个示例

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布局，其中包括

水平布局

和

垂直布局

。这种方法的美妙之处在于，同一个类将在这两个方面都起作用。

flex:0 0 2px

告诉它在容器方向上有2个像素宽，而不是增长或收缩。

align self:stretch

会告诉它在垂直方向上取容器的全尺寸。

我写这个答案是对Tazavoo答案的后续评论，这很好！我喜欢他们的定制分隔器类，有人问这个分隔器是否可以进一步定制/样式化，比如它是在中完成的

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

链接页面中的CSS属性：

边框图像

。分隔符的CSS属性

背景图像

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

背景图像

）

链接页面使线性渐变沿

的方向向下移动

。我们也可以使用它，但是水平使用分隔符看起来与垂直使用分隔符不同。这就是为什么我们需要将方向设置为对角线，所以分隔符的两种用法都有相似的梯度

下面是我如何设置具有渐变的分隔器类：

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");
    }
}

要自定义

线性渐变