1

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

4

6 回答 6

5

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

方式1：简单的方式

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

方式2：另一种简单的方式

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

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

myButton.addStylename("buttonStyle")

使用 css 设置样式

.buttonStyle{
color : red;
}

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

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

于 2013-02-07T08:35:27.780 回答
1

这就是我在 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。或者，如果您安装了字体，您可以使用另一个字形图标。

于 2013-12-06T11:48:48.443 回答
0 
Button bt = new Button();

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

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

bt.getElement().getStyle().setProperty("backgroundSize","30px");
于 2013-02-07T05:55:52.633 回答
0

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

button.addStyleName("ButtonIcon");

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

于 2013-02-07T06:48:37.113 回答
0

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

 Button button=new Button("<image src='abc.jpg' width='200px' height='300px' />Ok");
于 2013-02-07T04:57:24.667 回答
-1

是的，你可以 .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));
于 2013-02-07T05:31:12.833 回答