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",因为图标在左边对齐而文本在右边对齐.我现在想要对齐右侧的下一个按钮和左侧的文本的图标,使其看起来像"<< Back""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;
    }
  }
}

无论哪种方式,你应该得到类似的东西: