Skip to content

Create A Button with Image

Cecil edited this page Sep 30, 2017 · 1 revision

h/t to @dredknight and @backorder

Sometimes you might want an image in a button and Shoes doesn't allow that. You can get pretty close on your own by turning an Image into a button. Consider:

Shoes.app do
    def widget_button(img, &action)
        img.hover { img.scale 1.25, 1.25 }
        img.leave { img.scale 0.8, 0.8 }
        img.click { action.call if block_given? }
    end

    widget_button(image "#{DIR}/static/shoes-icon.png", left: 30, top: 30, width: 50) do
        window(title: "button 1 action", width: 200, height: 200, resizable: false) { para "Button works" }
    end
    widget_button(image "#{DIR}/static/man-ele-image.png", left: 30, top: 120, width: 50) do
        alert "Button 2 action"
    end
    widget_button(image "#{DIR}/static/shoes-icon-red.png", left: 30, top: 210,  width: 50)
end

Of course you'll want to use your own images and maybe you want hover and leave to do different things, but you can do that.

Clone this wiki locally