There’s been some amazing updates lately so huge kudos to the team!
When will it be possible to add an image (rather than an icon) to the button element?
I’ve been using div’s and image elements to create my own buttons, but with custom components now I’ve started to clean things up. I’ve had no luck being able to assign a type=“button” attribute to my divs and therefore limits them from being used within Form elements and attaching a workflow to trigger on submit, as the custom button isn’t detected properly. It seems like I’m going against best practices here and creating an unnecessary workaround.
I’d submitted as a feature request a long time ago but thought it would be an easy win.
I’d greatly appreciate the option to bind the current ‘icon’ property within the existing Button element to an image!!
HI @MichaelLovell,
what is your usecase?
type=“button” is used to detect button, but if you want them to trigger a submit in a form, you need to have type=“submit”.
Long and the short of it - i find the existing icon library too limiting and I had a mess of a time early on trying to import my own icons so I gave up. Others have created threads on that topic so I’ll leave that issue.
My use case is - I wanted more customization with buttons so I proceeded to create my own ‘buttons’ just using divs so I could include an image element within it and reference an icon from my own cdn. On some of my ‘buttons’ I also include a small loader element nested inside the divs to achieve the loading effect. (The new Starter Kit demonstrates the similar effect but I see that it is using an icon and an animation (a feature which has yet to be released)).
At the moment, I trigger workflows on click of the button because changing the attributes to type button and submit still doesn’t work with the on submit trigger.
If I manipulate the html tag directly in the DOM (from div to button) I get the expected behaviour and the on submit trigger works.
For a long time we blocked having element inside button because of prerendering. It was considered incorrect HTML, and prerendered pages broke when page was hydraded.
We made some update on this, and check if this is available now.
Here is a hack, do not know how much it will work, but you can add the attribute tag, with the value button and it should work. When i tried the editor crash temporaly (because tag was bind to something empty for a second, so maybe first fill the value, then the attribute name). Everything was working on the refresh. Does it change the HTML to what you want?
Hey @aurelie, what is the mechanic behind this? Is this a HTML standard or a Vue thing or a WeWeb “hack”? Is it safe to use in production? I wansn’t able to seemingly find anything that resembles this, other than is="vue:button" in Vue.
That was a WeWeb hack, as our wrapper was supporting this option. This may break with the Clean Dom release.
The best approach will probably be to fork the icon component, or wait our refactoring of it (we plan to have an svg version).
I will not say “safe in production” before testing it with the new release.
I’m planning to use it to create a component (div) that will have a dropzone instead of icons. Now I’m wondering whether it’s doable with the Clean DOM update coming.
wwLayout as a tag prop if needed (can be bind to a content property for example), your component can be a wwLayout root without problem, or a div containing a wwLayout, its up to you
Can you create a different topic with a detail explanation about how your code work (config and Vue file) so I can be sure I am answering correctly :)?
Thanks!
This is not custom code, it’s just the WeWeb’s reusable component, where I set tag to be button as you adviced above. No code involved here, it’s all WeWeb, otherwise I wouldn’t be worried
It works, I use wwLayout (Div) that is wrapped in a component. My only question is, if it will be broken after the update (I managed to get the prop work)
