Vaadin - 按钮上的对齐图标

Question

我正在进行简单的后退/前进导航，Vaadin现有两个按钮，每个按钮都有一个标签和一个图标（左右箭头）。

point__condition=...

如何对齐每个按钮上的图标？目前它看起来像 ＆＃34;＆LT;＆LT;回到＆＃34; ＆＃34;＆GT;＆GT;下一步＆＃34;，因为图标在左侧对齐，文本在右侧对齐。我现在想要对齐右侧的下一个按钮和左侧的文本的图标，使其看起来像＆＃34;＆lt;＆lt;回到＆＃34; ＆＃34;下一步＆gt;＆gt;＆＃34;。

我希望有人可以帮助我。

干杯，亨德里克

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;
    }
  }
}

无论哪种方式，你都应该得到类似的东西：