将图标添加到gwt中的按钮

Question

我有按钮，想要 在其中设置一个图标以及文本 。他们没有财产可以像在smartGwt中那样添加图标到按钮 ..任何想法如何实现它请帮助。

Answer 1

有很多方法可以实现这一目标。

方式1：简单方法

只需通过代码设置背景图片即可。 myButton.getElement().getStyle().setBackgroundImage("path");

方式2：另一种简单方法

设置您自己的HTML myButton.setHtml("Pass the html string");

方式3：简单但提供更多控制

myButton.addStylename("buttonStyle")

使用css设置此样式

.buttonStyle{
color : red;
}

方式4：根据我的最佳方式

创建自己的拆分按钮，将其包裹在flowpanel或horizontalPanel周围，将第一个窗口小部件和按钮作为另一个窗口小部件。这使您可以对图像和按钮进行额外控制。您可以在图像和按钮上使用单击处理程序，并且可以单独设置每个处理程序的样式。

Answer 2

这就是我在get：按钮中设置图标的方法。

添加一个额外的样式类钩子，我的下面是btn-fa-group到你的gwt按钮。如果使用属性“addStyleNames”，则可以在样式表中定义它们并具有多个类。

<g:Button text=" Post Your Answer" enabled="false" ui:field="showPostButton" addStyleNames="btn btn-default btn-fa-group" />

现在在CSS中定义以下声明：

btn-fa-group:before {
    color: #333333;
    content: "\f0c0";
    display: inline-block;
    font-family: "fontawesome";
}

需要注意的一些重要事项;不要忘记before选择器，确保unicode以斜杠开头并安装了fontAwesome。或者，如果安装了字体，则可以使用另一个字形图标。

Answer 3

您可以在按钮中设置带有图像的innerhtml，即

 Button button=new Button("<image src='abc.jpg' width='200px' height='300px' />Ok");

Answer 4

Button bt = new Button();

bt.getElement().getStyle().setBackgroundImage("url('path/to/ur/image/imagename.extention')");

还将背景图像的大小设置为按钮的大小

bt.getElement().getStyle().setProperty("backgroundSize","30px");

Answer 5

向Button添加Css类可能是最佳解决方案。

button.addStyleName（ “ButtonIcon”）;

如何定义您可以阅读的CSS和HTML here。

Answer 6

是的，你可以。获得名为SmartGwt

的push buttopn类型按钮

com.google.gwt.user.client.ui.PushButton

您可以将Image对象传递给它，如下所示

Image  image = new Image(GWT.getModuleBaseURL() + "/images/search-arrow.png");
RootPanel.get().add(new PushButton(image));