在 Vaadin Flow 中创建一个部分标题

Question

我正在尝试向我的项目中的一个部分添加标题，但我无法增加标签的大小或将其设为粗体。

我目前正在使用标签，但如果有替代品，我也会使用。

Answer 1

`H1`, `H2`, …, `H6`

HTML 使用 h1、h2、... h6 标签解决您的需求。 “h”代表“标题”。

Vaadin 用同名 class 的 objects 表示这些标签。 在您的网络中获取 <h2>…</h2> 元素Vaadin 生成的页面，在您的 Java 代码中使用 class H2。

样式取决于您的主题，例如 Valo 或 Material。如果需要，您可以稍微调整一下 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" ) );
    }
}

以及 Microsoft Edge 版本 80.0.361.62、macOS Mojave 中应用运行 Vaadin Flow 14.1.18 和 Java 13 的屏幕截图。

提示：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），让您的手有点脏。吸取一些经验教训后，return 来到 Vaadin 的干净世界。

Answer 2

使用 vaadin 取决于您使用的主题和 vaadin 版本。

以lumo为例

<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

在 Vaadin Flow 中创建一个部分标题

Make a section heading in Vaadin Flow

java

vaadin

vaadin-flow

`H1`, `H2`, …, `H6`

提示：Lumo主题的精简模式

提示：学习一些基础知识 HTML & CSS

在 Vaadin Flow 中创建一个部分标题

Make a section heading in Vaadin Flow

java

vaadin

vaadin-flow

H1, H2, …, H6

提示：Lumo主题的精简模式

提示：学习一些基础知识 HTML & CSS

`H1`, `H2`, …, `H6`