Vaadin-按鈕上的對齊圖標

Question

我正在使用Vaadin進行兩個按鈕的簡單后退/前進導航，每個按鈕都有一個標簽和一個圖標（左右箭頭）。

navigator = getUI().getNavigator();
    if (!StringUtils.isEmpty(backViewID)) {
        backButton = new Button(backButtonI18n, IconCache.FAST_REWIND_BUTTON.getIconResource());
        backButton.addClickListener(getBackButtonListener());
    }

    if (!StringUtils.isEmpty(nextViewID)) {
        nextButton = new Button(nextButtonI18n, IconCache.FAST_FORWARD_BUTTON.getIconResource());
        nextButton.addClickListener(getNextButtonListener());
    }

如何對齊每個按鈕上的圖標？ 當前看起來像“ << Back”“ >> Next”，因為圖標在左側對齊，文本在右側對齊。 現在，我想將右側下一個按鈕的圖標和左側的文本對齊，以使其看起來像“ <<返回”“ Next >>”。

我希望有人可以幫助我。

干杯，亨德里克

Answer 1

如果您使用Valo，這相對容易。 您只需要添加主題forwardButton.addStyleName(ValoTheme.BUTTON_ICON_ALIGN_RIGHT)附帶的樣式名稱：

public class ButtonsComponent extends HorizontalLayout {
    public ButtonsComponent() {
        Button backButton = new Button("Back", FontAwesome.ARROW_LEFT);
        Button forwardButton = new Button("Forward", FontAwesome.ARROW_RIGHT);
        forwardButton.addStyleName(ValoTheme.BUTTON_ICON_ALIGN_RIGHT);
        addComponent(backButton);
        addComponent(forwardButton);
    }
}

另外，您也可以將相同的CSS從valo-button-icon-align-right-style復制到您的主題中，然后將該特定樣式添加到您的按鈕中： forwardButton.addStyleName("my-custom-button-with-right-alligned-icon");

.my-custom-button-with-right-alligned-icon {
  [class*="wrap"] {
    display: inline-block;
  }

  .v-icon {
    float: right;
    $padding-width: ceil($v-unit-size/2.4);
    margin-left: $padding-width + ceil($padding-width/-5);

    + span:not(:empty) {
      margin-left: 0;
    }
  }
}

無論哪種方式，您都應該得到類似於以下內容的結果：