Центрировать виджеты в макете в Vaadin Flow

Когда у меня есть небольшой виджет, такой как LoginLayout, в другом макете, который появляется в гораздо большем окне, как я могу центрировать содержимое? Я хочу, чтобы содержимое отображалось примерно посередине окна как по ширине, так и по высоте.

Я нашел старые вопросы по этой теме, такие как это и это, но они предназначены для предыдущего поколения Vaadin (версии 6, 7, 8) до Flow (версии 10+, теперь 14).


java layout centering vaadin vaadin-flow
person Basil Bourque    schedule 17.08.2019    source источник

Ответы (1)


arrow_upward
8
arrow_downward

HorizontalLayout с помощью CSS3 Flexbox

Надежные классы HorizontalLayout и VerticalLayout все еще присутствуют в Vaadin 14. Эта пара классов были модифицированы для использования современной технологии Flexbox из CSS3. Посмотрите отличные руководства по Flexbox на CSS-Tricks.com и в Mozilla. CSS3 Flexbox очень концептуально близок к поведению классических Vaadin HorizontalLayout и VerticalLayout.

В приведенном ниже примере мы начинаем с Vaadin HorizontalLayout.

final public class AuthenticateView extends HorizontalLayout

В конструкторе добавьте свой виджет в макет, LoginForm является виджетом в этом примере.

this.add ( new LoginForm() );

Сделайте HorizontalLayout, чтобы использовать все доступное пространство как по ширине, так и по высоте.

this.setSizeFull ();

Установите наш контент в макете (наш LoginForm) так, чтобы он перемещался в середину по горизонтали. Глагол «выравнивать» здесь относится к языку типографов/дизайнеров, где выравнивание означает выравнивание по краю. страницы.

this.setJustifyContentMode ( FlexComponent.JustifyContentMode.CENTER );

Наконец, мы можем указать, где наш контент должен отображаться по вертикали в нашем теперь очень высоком макете. Нам нужен контент вверху, внизу или посередине?

Обратите внимание на разницу в синтаксисе здесь с поколением Vaadin 8: термин FlexComponent отражает использование CSS Flexbox.

this.setDefaultVerticalComponentAlignment ( FlexComponent.Alignment.CENTER );

Бонусная функция: давайте визуально проверим поведение нашего HorizontalLayout, раскрасив его невидимые иначе края.

this.getStyle ().set ( "border" , "6px dotted DarkOrange" );  // DEBUG - Visually display the  bounds of this layout.

Установите этот вид по умолчанию с помощью аннотации @Route.

@Route ( "" )
final public class AuthenticateView extends HorizontalLayout

При запуске мы обнаруживаем, что наша форма входа отображается в центре нашего гораздо большего окна веб-браузера. Обратите внимание на оранжевую рамку, показывающую, как выросло наше HorizontalLayout, чтобы занять все окно.

скриншот виджета Vaadin LoginForm, появляющегося по центру в гораздо большем окне веб-браузера.

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

Вот полный код класса.

package work.basil.example.ui;

import com.vaadin.flow.component.login.LoginForm;
import com.vaadin.flow.component.login.LoginI18n;
import com.vaadin.flow.component.orderedlayout.FlexComponent;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.router.Route;

@Route ( "" )
final public class AuthenticateView extends HorizontalLayout
{
    // Constructor
    public AuthenticateView ( )
    {
        super ();

        // Widgets
        this.add ( new LoginForm () );

        // Arrange
        this.getStyle ().set ( "border" , "6px dotted DarkOrange" );  // DEBUG - Visually display the  bounds of this layout.
        this.setSizeFull ();
        this.setJustifyContentMode ( FlexComponent.JustifyContentMode.CENTER ); // Put content in the middle horizontally.
        this.setDefaultVerticalComponentAlignment ( FlexComponent.Alignment.CENTER ); // Put content in the middle vertically.

    }
}

Предупреждение: показанного выше кода недостаточно для реальной работы входа в систему. Здесь основное внимание уделялось макету виджета, а не аутентификации пользователя.

person Basil Bourque    schedule 17.08.2019