CODEWITHSUNDEEP
vaadinvaadin-flowhorizontal-line
Basil Bourque
Basil Bourque

Reputation: 339392

Vertical or horizontal rule in Vaadin Flow

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?

Upvotes: 5

Views: 5376

Answers (2)

kscherrer
kscherrer

Reputation: 5766

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

Upvotes: 3

Erik Lumme
Erik Lumme

Reputation: 5342

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.

Upvotes: 9

Related Questions