Vaadin

Question

我正在开发一个简单的 back/forward-navigation，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);
    }
}

或者，您可以从 valo-button-icon-align-right-style 复制完全相同的 CSS 到您的主题中，然后将该特定样式添加到您的按钮：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;
    }
  }
}

无论哪种方式，你最终应该得到类似于：

Vaadin - 对齐按钮上的图标

Vaadin - Align icon on button

icons

button

alignment

vaadin7