Vaadin - 按钮上的对齐图标答案

【问题标题】：Vaadin - Align icon on buttonVaadin - 按钮上的对齐图标
【发布时间】：2016-07-03 13:49:42
【问题描述】：

我正在使用 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());
    }

如何对齐每个按钮上的图标？目前它看起来像 "> Next"，因为图标左对齐，文本右对齐。我现在想将右侧下一个按钮的图标与左侧的文本对齐，使其看起来像“>”。

我希望有人可以帮助我。

干杯，亨德里克

【问题讨论】：

标签： button icons alignment vaadin vaadin7

【解决方案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;
    }
  }
}

无论哪种方式，您最终都应该得到类似的结果：

【讨论】：