如何 align/move Vaadin 按钮

Question

我正在学习 Vaadin，我想将两个按钮移动到弹出窗口 window 的底部，按钮之间留有间距。我很确定我必须覆盖我的主题中的按钮 css 但如何更改按钮在 java 代码中的绝对位置？

这是我的代码：一个简单的按钮，带有调用弹出方法的点击侦听器 (subwindow)。在下面的代码中，我试图将“是”按钮移动到弹出窗口 window 的底部。

protected void init(VaadinRequest vaadinRequest) {
    final VerticalLayout layout = new VerticalLayout();

    Button helloButton = new Button("Click Me");
        helloButton.addClickListener(e -> helloPopUp()); 

    layout.setMargin(true);
    layout.setSpacing(true);
    layout.addComponents(helloButton);
    setContent(layout);
}

private void helloPopUp() {
        Window subWindow = new Window("Pop Up");                    
        HorizontalLayout subContent = new HorizontalLayout();
        AbsoluteLayout layout2 = new AbsoluteLayout();
        subContent.setMargin(true); 

            Label text = new Label( "Hello Pop Up" , ContentMode.PREFORMATTED);
            subContent.addComponent(text);

            Button yes = new Button("Yes");
            Button no = new Button("No");               
            layout2.addComponent(yes, "left: 50px; bottom: 0px;");

            subContent.addComponents(layout2);
            subContent.addComponent(no);
            subWindow.setContent(subContent);
            UI.getCurrent().addWindow(subWindow);           
        }

Answer 1

这是一种不使用 AbsoluteLayout

的方法

private void helloPopUp() {
    Window subWindow = new Window("Pop Up");
    VerticalLayout subContent = new VerticalLayout();
    subContent.setMargin(true);

    Label text = new Label( "Hello Pop Up" , ContentMode.PREFORMATTED);
    subContent.addComponent(text);

    Button yes = new Button("Yes");
    Button no = new Button("No");

    HorizontalLayout buttonsLayout = new HorizontalLayout();
    buttonsLayout.addComponents(yes, no);
    buttonsLayout.setSpacing(true);

    subContent.addComponent(buttonsLayout);
    subContent.setComponentAlignment(buttonsLayout, Alignment.BOTTOM_LEFT);
    subWindow.setContent(subContent);
    UI.getCurrent().addWindow(subWindow);
}

如何 align/move Vaadin 按钮

How to align/move Vaadin buttons

css

vaadin

vaadin7

vaadin6