AppLayout 中如何将 Component ranged right 添加到 Navbar？

Question

我的 MainView extends 的 AppLayout。我想在导航栏左侧填充徽标，在导航栏右侧填充用户 ID。不幸的是，我尝试的所有操作都以两个组件都绑定到左侧结束。

导航栏目标：

| Image -------------------------------------------------------------------------------------------------------- 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 中，但它也不起作用。

Answer 1

我在这里发现了一个类似的案例而且解决方案似乎对我有用，就像你描述的那样：


@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 太接近末尾了，但您可以在那里设置任何您想要的值。这就是它的样子：

我用过的链接：

A Complete Guide to Flexbox 这是我最喜欢的关于 flexbox 的文章。我几乎一直在寻找它，当我想检查一些东西时:)
AppLayout official docs。存根片段代码取自那里

AppLayout 中如何将 Component ranged right 添加到 Navbar？

How to add Component ranged right to Navbar in AppLayout?

html

css

java

vaadin

vaadin14