Custom html component

Elements Component Development
1

dan messed with custom html I put in html

<div class="h-24 {{widthbox}} {{customColor}} m-auto"></div>

in properties put

{
"groups": [
{
"title": "Untitled",
"icon": "paintpalette",
"properties": [
{
"title": "BG Color",
"id": "customColor",
"format": "bg-{{value}}",
"themeColor": {
"default": {
"name": "red",
"brightness": 300
}
}
},
{
"title" : "widthbox",
  "id": "widthbox",
  "format": "w-[{{value}}px]",
  "slider": {
	  "default" : 0,
	  "min" : 0,
	  "max" : 500,
	  "units": "px",
      "round": true
	  
  }
},
]
}
]
}

I messed with the code but words, is this allowable, just made some of it up in width box

the rest of Elements seems straight forward except I cannot view in safari

but really enjoying using so far, have had some copy paste issues in custom html but maybe just me

2

I highlight in the custom code right click no copy option some times

3

I re-built this in a sample project and it seems to work just great…

Here’s the sample project with the working custom component. Have fun!

2 Likes
4

I so want to be able to add my own icons for custom components. :slight_smile:

BTW while there’s lots of things to be improved in time, you can feel that Elements is going to be something special. Kudos!

1 Like
5

Dan yes it works for me, wow you added the next bit I was going to try next, I added a height as well, but I made up the bit in properties, is that ok no need to stick with copy bits from the manual, if so I can build something I want to do. Hope so, really good fun being able to do this, powerful stuff.

6

Yup, we almost got this done when we were adding the pdf icon support… We’ll get on to this shortly :wink:

7

You don’t need to stick to the manual, they are just examples, just try things out and see if they work. You can always ask here too!

There’s lots more we’ve actually implemented we just need to get it all added to the docs… Exciting times ahead.

I’m glad you seem to love the custom components as much as I do :heart_eyes:

8

“format”: “pb-[{{value}}%] pt-[{{value}}%]”,

I entered two values so I could control both padding top and bottom with one slider, it works, again is this as intended, don’t want to find out later, it will not work, could I enter more in the same curly brackets is there a limit

9

Yes, that’s absolutely fine! Now you’ve created the property, you can use {{value}} in the code as many times as you like. Have fun!