Vaadin对齐按钮

Question

我在Gridlayout中有4个按钮。

我用过

btnDetails.setSizeUndefined();
buttonsGrid.setComponentAlignment(btnDetails, Alignment.MIDDLE_LEFT);

但由于 setSizeUndefined（）;

，您可以看到按钮的宽度不同

当我指定按钮的宽度和高度时，我得到了这个结果

您可以看到这样按钮没有对齐。 我已经包括了

 buttonsGrid.setComponentAlignment(btnDetails, Alignment.MIDDLE_LEFT);

但似乎没有 setSizeUndefined（）;

我需要按照第一张图片中的对齐按钮，但宽度相同。

谢谢， 基里尔

Answer 1

如何在主题中使用text-align: left？这样的事情（对于Vaadin 8用FontAwesome替换VaadinIcons）：

<强>爪哇：

public class GridLayoutWithLeftAlignedButtons extends GridLayout {
    public GridLayoutWithLeftAlignedButtons() {
        super(1, 4);
        addButton("Details", FontAwesome.SEARCH);
        addButton("Copy (Inhalt)", FontAwesome.FILE_TEXT);
        addButton("Copy (Zeile)", FontAwesome.COPY);
        addButton("Copy (ID)", FontAwesome.SERVER);
    }

    private void addButton(String caption, FontAwesome icon) {
        Button newButton = new Button(caption, icon);
        newButton.addStyleName(ValoTheme.BUTTON_BORDERLESS);
        newButton.addStyleName("black-background-white-text");
        newButton.setWidth("300px");
        addComponent(newButton);
    }
}

<强>主题：

.v-button.black-background-white-text{
  background-color: black;
  color: white;
  text-align: left;
}

<强>结果：