Vertical or horizontal rule in Vaadin Flow

Question

I want to section off one area of a layout from another visually in my Vaadin Flow layout using the Java API.

I want something like the hr horizontal rule found in HTML. I would also want the equivalent, a vertical rule (which was never defined in HTML).

Is there some easy way to have a visual indicator of a thematic shift between parts of a layout?

Geraldgeralda

Answer 1

Hr class

For an <hr> there is the Hr class.

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

Roll-your-own

Another option is to create classes for the dividers, there are a few different ways of doing this, here's an example

public class Divider extends Span {

    public Divider() {
        getStyle().set("background-color", "blue");
        getStyle().set("flex", "0 0 2px");
        getStyle().set("align-self", "stretch");
    }
}

And used as such

horizontalLayout.add(new Span("First"), new Divider(), new Span("Second"));

Using align-self and flex will only work in flex layouts, which includes HorizontalLayout and VerticalLayout. The beauty of this approach is that the same class will work in both. The flex: 0 0 2px tells it to be 2 pixels wide in the direction of the container, and not grow or shrink. The align-self: stretch will tell it to take the full size of the container in the perpendicular direction.

Moline

Seems like a good solution. Can you make it fancy by tapering or fading the line on each end, for something like the effect seen in this gradient borders page? – Geraldgeralda

cool custom Divider class, I like how it works both as vertical and horizontal Divider! @BasilBourque yes it's possible, by setting background-image to a linear-gradient at 135 or -45 degree, instead of setting the background-color as done in this answer or styling the border as done in your link. I tested it in Vaadin application, works perfectly. I will use this Divider for sure! – Studley

@Cashbee Can you post an example of your approach as another Answer? – Geraldgeralda

@BasilBourque, could you please advice how to add some text in front of that divider? I want to have a kind of from separator: section name + divider. Thanks in davance. – Freiman

@VadimLotarev Have you tried the horizontal layout code shown in the Answer? – Geraldgeralda

@BasilBourque, yes I did. Vertical divider is show in this case but I need horizontal one ... Horizontal line is displayed in case of VerticalLayout but text is shown on the top of devider but not in front of. – Freiman

Answer 2

I write this answer as follow-up to my comment on Tazavoo's answer, which is great! I love their custom Divider class, and it has been asked whether this divider can be customized/styled further, something like it is done in this gradient borders page.

Of course this divider can be styled further! But the difference between the divider and the elements in the link is that in the link, the borders of an element is styled, while we need to style the actual element itself here.

CSS attribute in the linked page: border-image. CSS attribute for the Divider background-image.

(I am not familiar enough with CSS -webkit attrributes, so I don't know if you need more than just background-image for a good visualisation in all browsers)

---

The linked page makes the linear-gradient go in the direction to bottom. We could use that too, but then using the Divider horizontally would look different than using it vertically. That is why we need to set the direction to a diagonal, so both usages of the divider have a similar gradient. See proof of concept in w3schools' TryIt Editor

Here is how I set up the Divider class with a gradient:

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

To customize the linear gradient even more, please see the docs on w3schools
_{All the credits of the divider class go to @Tazavoo. Please go upvote their answer}

Studley