代码之家 › 专栏 › 技术社区 › Basil Bourque

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

horizontal-line vaadin-flow vaadin

1

Basil Bourque · 技术社区 · 7 年前

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

hr horizontal rule 可以在HTML中找到。我还想要一个等价的垂直规则(从未在HTML中定义)。

2 回复 | 直到 7 年前

1

5

Basil Bourque 7 年前

`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 只能在flex布局中使用,其中包括 HorizontalLayout 和 VerticalLayout flex: 0 0 2px align-self: stretch 将告诉它在垂直方向上取容器的全尺寸。

2

3

kscherrer 7 年前

我写下这个答案,作为我对塔扎沃答案的评论的后续,这太棒了!我喜欢他们的自定义分隔器类,有人问这个分隔器是否可以进一步定制/样式化,类似于在 this gradient borders page .

当然,这个分隔符可以进一步设计!但是分隔符和链接中的元素之间的区别在于,在链接中边界

链接页面中的CSS属性: border-image . 分隔符的CSS属性 background-image .

(我对CSS-webkit属性不够熟悉,所以我不知道您是否需要更多的属性 背景图像

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

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

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。请投票表决他们的答案}