Make a section heading in Vaadin Flow

Question

I am trying to add a heading to a section in my project, but I can't increase the size of the label or make it bold.

I am currently using a label, but if there is an alternative, I will also take that.

Answer 1

H1, H2, … , H6

HTML solves your need with the h1, h2, … h6 tags. The “h” stands for “heading”.

Vaadin represents these tags with objects of a class of the same name. To get a <h2>…</h2> element in your the web page generated by Vaadin, in your Java code use the class H2.

The styling depends on your theme, such as Valo or Material. You can tweak with a bit of CSS if you want. This has been addressed already on Stack Exchange, so search to learn more.

Using H1…H6 is valuable if your web app will be crawled by a search engine. Search engines use the hierarchy of these tags to make sense of your content.

Here is some untested example code.

VerticalLayout layout = new VerticalLayout() ;

layout.add( new H1( "Animal" ) ) ;

layout.add( new H2( "Identity" ) ) ;
layout.add( new TextField( "Name" ) ) ;
layout.add( new TextField( "Species" ) ) ;
layout.add( new TextField( "Color" ) ) ;

layout.add( new H2( "Owner" ) ) ;
layout.add( new TextField( "Name" ) ) ;
layout.add( new TextField( "Phone" ) ) ;

Here is complete example app.

package work.basil.example;

import com.vaadin.flow.component.dependency.CssImport;
import com.vaadin.flow.component.html.H1;
import com.vaadin.flow.component.html.H2;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.router.Route;


/**
 * The main view contains a button and a click listener.
 */
@Route ( "" )
//@PWA(name = "Project Base for Vaadin", shortName = "Project Base")
@CssImport ( "./styles/shared-styles.css" )
@CssImport ( value = "./styles/vaadin-text-field-styles.css", themeFor = "vaadin-text-field" )
public class MainView extends VerticalLayout
{

    public MainView ( )
    {
        this.add( new H1( "Animal" ) );

        this.add( new H2( "Identity" ) );
        this.add( new TextField( "Name" ) );
        this.add( new TextField( "Species" ) );
        this.add( new TextField( "Color" ) );

        this.add( new H2( "Owner" ) );
        this.add( new TextField( "Name" ) );
        this.add( new TextField( "Phone" ) );
    }
}

And a screenshot of app running Vaadin Flow 14.1.18 with Java 13 in Microsoft Edge version 80.0.361.62, macOS Mojave.

Tip: Lumo theme’s compact mode

For smaller sizing and spacing of the elements on the rendered page, you can engage the compact mode in Vaadin’s Lumo mode.

Tip: Learn some basic HTML & CSS

Learning the basics of HTML and CSS will greatly enhance your Vaadin skills.

Vaadin Flow hides most of the details and drudgery of HTML/CSS/JavaScript. But learning the basics of HTML & CSS will help you make more sense of Vaadin features.

I suggest making a real web site by hand (manually coded HTML & CSS ) for a friend, club, church, etc. to get your hands a bit dirty. With some lessons learned, return to the clean world of Vaadin.

Answer 2

With vaadin it depends on the theme and vaadin version you use.

For lumo for example

<span class="size-xs">XS</span>
<span class="size-s">S</span>
<span class="size-m">M</span>
<span class="size-l">L</span>
<span class="size-xl">XL</span>

<custom-style>
  <style>
    .size-xs {
      width: var(--lumo-size-xs);
      height: var(--lumo-size-xs);
    }

    .size-s {
      width: var(--lumo-size-s);
      height: var(--lumo-size-s);
    }

    .size-m {
      width: var(--lumo-size-m);
      height: var(--lumo-size-m);
    }

    .size-l {
      width: var(--lumo-size-l);
      height: var(--lumo-size-l);
    }

    .size-xl {
      width: var(--lumo-size-xl);
      height: var(--lumo-size-xl);
    }
  </style>
</custom-style>

https://cdn.vaadin.com/vaadin-lumo-styles/1.6.0/demo/sizing-and-spacing.html