java在Vaadin流中生成节标题

Question

我试图在我的项目中为一个部分添加标题，但我不能增加标签的大小或使其加粗

我目前正在使用标签，但如果有其他选择，我也会选择

Answer 1

对于vaadin，这取决于您使用的主题和vaadin版本

以卢莫为例

<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

Answer 2

H1，H2，…，H6

HTML通过h1、h2、h6标记解决您的需要。“h”代表“标题”

Vaadin用同名类的对象表示这些标记要在由Vaadin生成的网页中获取<h2>…</h2>元素，请在Java代码中使用类H2

样式取决于主题，如Valo或材质。如果你愿意，你可以用一些CSS来调整。这已经在Stack Exchange上解决了，请搜索以了解更多信息

如果您的web应用程序将被搜索引擎抓取，那么使用H1…H6是有价值的。搜索引擎使用这些标签的层次结构来理解您的内容

下面是一些未经测试的示例代码

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

下面是完整的示例应用程序

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

以及在MicrosoftEdge版本80.0.361.62 MacosMojave中运行VaadinFlow14.1.18和Java13的应用程序的屏幕截图

提示：Lumo主题的压缩模式

要减小呈现页面上元素的大小和间距，可以engage the compact mode in Vaadin’s Lumo mode

提示：学习一些基本的HTML&；CSS

学习HTML和CSS的基础知识将大大提高您的Vaadin技能

Vaadin Flow隐藏了HTML/CSS/JavaScript的大部分细节和繁琐工作。但是学习HTML&；CSS将帮助您更好地理解Vaadin功能

我建议为朋友、俱乐部、教堂等手工制作一个真正的网站（手工编码的HTML和CSS），让你的手有点脏。吸取了一些教训，回到瓦丁的干净世界