0

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

导航栏目标：

| 图片 - - - - - - - - - - - - - - - - - - - - - - - - - -------------------------------------------------- ----- 用户名 |

示例代码（与 Vaadin 14 Image 和 String 的结果相同）：

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也不起作用的中。

4

1 回答 1

4

我在这里找到了一个类似的案例How to align flexbox columns left and right? 和解决方案似乎对我有用，就像你描述的那样：


@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, 因为 elseBar太接近结尾了，但是你可以在那里设置你想要的任何值。这就是它的样子： 在此处输入图像描述

我用过的链接：

于 2019-10-16T14:42:44.913 回答