Label in Vaadin

Flow
1

What is the best way to achieve this please ? A label and it information. I have a couple of information to display on a view like this but I don’t think using so much verticalLayout is best practice. Kindly assist

2

Good question!

This can be approached from two sides:

  1. Visual – just making it look like that
  2. Semantic – actually using appropriate HTML structures for read-only label-and-value pairs

Ideally the solution would provide both, of course.

I’ll provide some options, but @quirky-zebra might have ideas too?

3

I think semantically a description list would make the most sense (the

,
and
elements)

4

I’ve used https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl for it with great success, Vaadin flow has a class for it as well

5

right, so we’re on the same line about that

6

so, in Flow code you could build that e.g. like so:

DescriptionList dl = new DescriptionList();
DescriptionList.Term dt = new DescriptionList.Term("Label");
DescriptionList.Description dd = new DescriptionList.Description("Value");
dl.add(dt, dd);
add(dl);```
7

that comes with an unfortunate default (native) styling
unknown.png

8

(which you can of course override with css)

9

e.g. this gives you that structure but with nicer styling

DescriptionList dl = new DescriptionList();
        DescriptionList.Term dt = new DescriptionList.Term("Label");
        dt.addClassNames(LumoUtility.TextColor.SECONDARY, LumoUtility.FontSize.SMALL, LumoUtility.FontWeight.MEDIUM);
        DescriptionList.Description dd = new DescriptionList.Description("Value");
        dd.addClassName(LumoUtility.Margin.Left.NONE);
        dl.add(dt, dd);
        add(dl);
10

unknown.png

11

Excellent! Thank you @useful-whale @quirky-zebra

12

This is great! I didn’t know Vaadin had this component.

13

yeah, we should make these plain HTML element Flow classes easier to find somehow…