How would you add an image or icon to a button such as this:
We were able to do this with vision, but can’t seem to figure it out with Perspective. Can we also group components?
You can add images to Button components in Perspective.
I was able to set up the following button:
With the following property settings:
The rounded corners on your buttons should just be CSS stylings, but I’ll leave that for you.
1 Like
Thank you!
we were able to adjust the corners. One thing I will point out though is that I tried to edit the background color on all buttons and then once set and applied the corner radius all went back to default.
Can someone fix the images in the post?
Also, is there a way to be able to bind to an icon rather than an image? It seems silly to have seperate icons overlaid on buttons.
I'm letting our web team know there are image issues and they'll be looking into it.
What do you mean by 'bind to an icon'?
I think he means why can we not use an icon within properties. i.e. Using "material/{icon}" and have that appear natively within the button. rather than using an image from your image folder.
I have the same issue where by I have tried using something like this within the parameters. (and other different structures) but no luck.
{
"text": "text",
"icon": {
"path": "material/[icon]"
}
}
1 Like
With the icon component it is easy to just set the binding to an icon name, you don’t need the fully qualified path. Also the icons are SVG vs images so it works a lot better then maintaining image files for all the buttons.
It seems the button component only allows for images not “icons”.
1 Like
Buttons do support icons. If you add an icon object under the image prop, you can supply the icon name and library just like the icon component.
Feel free to copy the below json and paste into your view so that you can see for yourself:
[
{
"type": "ia.input.button",
"version": 0,
"props": {
"image": {
"icon": {
"library": "material",
"name": "warning"
}
}
},
"meta": {
"name": "Button"
},
"position": {
"height": 47,
"width": 133,
"x": 246,
"y": 203
},
"custom": {}
}
]
1 Like
Thanks that did the trick!
As a bit of a grumble… there are a ton of seemly hidden props like this in perspective… The new property panel is nice, but not having all the options show up without the need to know these custom properties is becoming annoying. Hopefully this type of stuff will make it into the docs.
Your grumbling is justified. There is no good way you could know about these “hidden” properties right now. As the documentation on components get fleshed out more, it will become a good reference for all component properties.
3 Likes
I'm on the same page as you and Joel. This is kind of the 'dark side' of having a dynamic property system. For better or worse, Vision's static property definitions made it easier to know what your options are. The upside is that Perspective has the foundation needed to grow it into a more discoverable property system while not losing the flexibility and power. Lots of ideas we want to explore, and we'll definitely get some movement in that direction once we finish up the remaining 'big pieces' of 8.0.
1 Like
Glad to know I’m not the only one on this 
Is there a way to add an image or icon to a label? I’ve tried creating the customer properties used above on a button over to a label and it doesn’t work.
No, there’s not.
You could always make a (small) View which has params of “text” and “path”, which has a Label and Icon Components. Position the Icon in the preferred location relative to the Label (if you want it to always be after the text, you’ll have to bind the Icons position to some mathematical logic). Bind the Label.props.text property to self.view.params.text and bind Icon.props.path to self.view.params.path.
At this point you have a Label/Icon template.
Now wherever you want a Label with an Icon you can use an Embedded View instead. Specify the path to the View you’ve made, and supply the necessary parameters, and you’re all done.