Сделать заголовок раздела в Vaadin Flow - PullRequest
Новая
       13

Сделать заголовок раздела в Vaadin Flow

1 голос
/ 29 февраля 2020

Я пытаюсь добавить заголовок в раздел в моем проекте, но не могу увеличить размер ярлыка или сделать его жирным.

В настоящее время я использую метку, но если есть альтернатива, я тоже ее приму.

Ответы [ 3 ]

3 голосов
/ 29 февраля 2020

H1, H2,…, H6

HTML удовлетворяет ваши потребности с помощью тегов h1, h2,… h6. «H» означает «заголовок».

Vaadin представляет эти теги объектами одного класса. Чтобы получить элемент <h2>…</h2> на вашей веб-странице, созданный Ваадин, в своем коде Java используйте класс H2.

Стиль зависит от вашей темы, такой как Вало или Материал. Вы можете настроить немного CSS, если хотите. Об этом уже говорилось в Stack Exchange, поэтому ищите, чтобы узнать больше.

Использование 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" ) );
    }
}

и снимок экрана приложения, на котором запущен Vaadin Flow 14.1.18 с Java 13 в Microsoft Edge версии 80.0.361.62, macOS Mojave .

screenshot of H1 and H2 headings running in example web app

Совет: компактный режим Lumo theme

Для уменьшения размеров и расстояния между элементами на отображаемой странице вы можете включите компактный режим в режиме Ваадина Lumo .

Совет. Изучите основы c HTML & CSS

Изучение основ HTML и CSS значительно улучшат ваши навыки Vaadin.

Vaadin Flow скрывает большинство деталей и рутинную работу HTML / CSS / JavaScript. Но изучение основ HTML & CSS поможет вам лучше понять возможности Vaadin.

Я предлагаю сделать настоящий веб-сайт вручную (с ручным кодированием HTML & CSS) для друга, клуба, церкви и т. Д. c. чтобы ваши руки немного пачкались. Получив некоторые уроки, вернитесь в чистый мир Ваадина.

0 голосов
/ 29 февраля 2020

Для 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

0 голосов
/ 29 февраля 2020

Вы можете использовать ContentMode.HTML следующим образом: 

Label myLabel = new Label("<b>This is a bold text</b>", ContentMode.HTML);

Проверьте это для получения дополнительной информации.

В качестве альтернативы, 

Label myLabel = new Label();
myLabel.getElement().setProperty("innerHTML", "<b>This is a bold text</b>");
...