Как добавить компонент с ранжированием прямо на панель навигации в AppLayout?

Мой MainView extends из AppLayout. Я хочу заполнить панель навигации логотипом с левой стороны и идентификатором пользователя с правой стороны панели навигации. К сожалению, все, что я пробовал, заканчивается тем, что оба компонента привязаны к левой стороне.

Цель навбара:

| Изображение ------------------------------------------------- -------------------------------------------------- ----- UserID |

Пример кода (тот же результат с изображением Vaadin 14 и строкой):

public class MainView extends AppLayout
...

private void setupNavigationBar() {
    Div a = new Div();
    a.setText("Foo");
    a.getStyle().set("flex-flow", "flex-start");

    Div b = new Div();
    b.setText("Bar");
    b.getStyle().set("flex-flow", "flex-end");
    addToNavbar(a, b);
}

Результат навбара:

| FooBar ------------------------------------------------- -------------------------------------------------- --------------- |

В чем проблема? Почему flex-flow не работает? Я уже пробовал обернуть его в HorizontalLayout, который тоже не работает.


java html css vaadin vaadin14
person Michael Kemmerzell    schedule 16.10.2019    source источник

Ответы (1)


arrow_upward
4
arrow_downward

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


@Route("custom-appLayout")
public class CustomAppLayout extends AppLayout {
    public CustomAppLayout(){
            Image img = new Image("https://i.imgur.com/GPpnszs.png", "Vaadin Logo");
            img.setHeight("44px");
            addToNavbar(new DrawerToggle(), img);
            Tabs tabs = new Tabs(new Tab("Home"), new Tab("About"));
            tabs.setOrientation(Tabs.Orientation.VERTICAL);
            addToDrawer(tabs);
            addToNavbar(img);

            Div b = new Div();
            b.setText("Bar");
            b.getStyle().set("margin-left", "auto");
            b.getStyle().set("padding", "15px");
            addToNavbar(b);
    }
}

Я добавил padding, так как иначе Bar будет слишком близко к концу, но вы можете установить там любое значение, которое хотите. А это выглядит так: введите описание изображения здесь

Ссылки, которые я использовал:

person anasmi    schedule 16.10.2019
comment
Большое спасибо за разъяснения и за уделенное время! Думаю, я скучаю по использованию гибкого потока. - person Michael Kemmerzell; 17.10.2019