gwt - 将图标添加到 gwt 中的按钮

Question

我有按钮，想为它设置一个图标以及里面的文本。他们没有像 smartGwt 中那样向按钮添加图标的属性..任何想法如何实现它请帮忙。

score 5 · Accepted Answer

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

方式1：简单的方式

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

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

myButton.addStylename("buttonStyle")

使用 css 设置样式

.buttonStyle{
color : red;
}

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

score 1 · Accepted Answer

这就是我在 get:button 中设置图标的方式。

添加一个额外的样式类挂钩，我的下面是 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。或者，如果您安装了字体，您可以使用另一个字形图标。

score 0 · Accepted Answer

Button bt = new Button();

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

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

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

score 0 · Accepted Answer

向您的 Button 添加一个 Css 类可能是最好的解决方案。

button.addStyleName("ButtonIcon");

您可以在此处阅读如何定义 CSS 和 HTML 。

score 0 · Accepted Answer

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

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

score -1 · Accepted Answer

是的，你可以 .Gwt 有一个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));