This week’s tutorial dives into a more advanced topic, but it’s still really approachable, even if you’re just getting started with Elements and web design.
In this tutorial, we’ll show you how to take Tailwind code and turn it into a reusable Custom Component in Elements. Once you get the hang of it, you’ll unlock the real power of Elements, and then you’ll be able to build anything!
Let us know in the comments how you got on building your own components, and we’re always around to help if you get stuck. Have fun!
Ben as you’re a genius and I’m a Div - didn’t know whether to put that here or not! two weeks ago I used the Dev Diary video and created my own blobs version with 5 blobs, changed colours, changed colours to images and “built” my own little custom blob feature as a play. I was able to add images, change colours etc, however I followed the video and Dan had already done the leg work. There are the available ‘code” snippets in manual area as you show on video but for novices like me just playing - how do I know an image is a resource? how do I know what to type where you added “@textte@dropzonet, @dropzone” etc. by this I mean general where is the “dictionary” for divs to find out what is available?
I’ve gone ahead and removed the previous replies in this thread involving the Elements Bot, as the examples provided were incorrect and could mislead others reading along.
To clarify: @PMUK had asked about what directives (like @text and @dropdown) are available for use inside Elements templates.
To properly answer that, here’s a full list of supported directives in Elements’ templating language:
@ben This is mind-boggling and super useful. Although now I will probably be throwing a lot of code away that I just spent days writing, that is a good thing.
So one thing I need help with is connecting the custom stuff to the core pieces. If I add a dropzone in my custom modal and then add a flex and a couple of buttons into the flex. I need to connect the buttons to my JavaScript code that handles clicks on the buttons. I assumed that all I had to do was set the IDs to match the ones I was using in the code—that way, the JS code can find them and hook up the appropriate click actions.
But this does not appear to be working for some reason, and it is unclear why it isn’t working.
I tested something like this before with a core button that was set to an ID that was being used in the JS, and it seemed to work.
My question: Is this not working because the buttons are inside a flex, or is there some other reason?
UPDATE: Never mind, I got it figured out and have now converted my privacy consent system to have most of its content made with core components, and only the weirder parts are code. It is still all run by the JS code, which is now working perfectly. By using the directives, I was able to remove so many properties that I had created. This has made it more flexible and user-friendly. Over time, I will see if I can do the same to more of the custom properties, but for now, this is working well. Going to be a considerable time saver making new elements in the future. If I get ambitious, I’ll rebuild this whole system from scratch to leverage the directives more effectively. Fantastic what Elements allows you to do, and I agree wholeheartedly with@benthat there is nothing like it out there, and I have tried everything.
two weeks ago I used the Dev Diary video and created my own blobs version with 5 blobs, changed colours, changed colours to images and “built” my own little custom blob feature as a play. I was able to add images, change colours etc, however I followed the video and Dan had already done the leg work. There are the available ‘code” snippets in manual area as you show on video but for novices like me just playing - how do I know an image is a resource? how do I know what to type where you added “