GWT自定义按钮与图标上面的文本 [英] GWT Custom Button with Icon above Text

问题描述

我想用一个图标和文字，其中的图标是上面的文字创建按钮。

I want to create a button with an icon and text, where icon is above text.

寻找信息，我发现从树里这答案。

Looking for information I've found this answer from Juri.

有了它，我已经创建了自己的SquareButton类象下面这样：

With it I've created my own SquareButton class like below:

import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.resources.client.ImageResource;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.Image;

/**
 * Square Button class
 * @author julio.palma.vazquez
 *
 */
public class SquareButton extends Button {

    /** Text to show. */
    private String text;

    /**
     * Constructor.
     */
    public SquareButton() {
        super();
    }

    public SquareButton(String text, ClickHandler clickHandler, ImageResource imageResource) {
        super(text, clickHandler);
        setResource(imageResource);
        setPixelSize(60, 60);
    }

    /**
     * Set image resource.
     * @param imageResource image resource
     */
    public void setResource(ImageResource imageResource){
        Image img = new Image(imageResource);
        String definedStyles = img.getElement().getAttribute("style");
        img.getElement().setAttribute("style", definedStyles + "; vertical-align:top;");
        DOM.insertBefore(getElement(), img.getElement(), DOM.getFirstChild(getElement()));
    }

    /**
     * Set text.
     * @param text text to show
     */
    @Override
    public void setText(String text) {
        this.text = text;
        Element span = DOM.createElement("span");
        span.setInnerText(text);
        span.setAttribute("style", "vertical-align:bottom; text-align: center;");

        DOM.insertChild(getElement(), span, 0);
   }

   /**
    * Get text.
    * @return text to show
    */
   @Override
   public String getText() {
       return this.text;
   }
}

可惜的是，我希望以上的图像输出的文字这是行不通的。

Unfortunatelly it doesn't work as I expect and output text above image.

您能给我一个忙吗？

推荐答案

您可以设置按钮HTML。您可以尝试以下操作：

You can set HTML in Button. You can try following:

Button button = new Button();
String html = "<div><center><img src = '"+GWT.getModuleBaseURL()+"/images/img1.png' height = '10px' width = '10px'></img></center><label>Text</label></br></div>";
button.setHTML(html);

给予适当的大小到你的按钮和图像。

Give proper size to your button as well as image.

这篇关于GWT自定义按钮与图标上面的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！