How to create groups in the custom component properties

Elements Custom Components
1

must be doing something wrong, copied from manual but doesn’t divide the areas as I expect

see example lots of custom stuff , went a bit over the top

also with the slider is there a way of changing the increments of 1 to another number

update link forgot to turn main container background on

https://www.dropbox.com/scl/fo/9t3kykn53r9m8x0lnrgvp/AFI5ft1DUWbXfvlnIWSCxe4?rlkey=d4hd7rwy6rs340b380rqwuwij&st=r969pfev&dl=0
2

I don’t think so, and I’m not sure of the use case for this…

Here’s a code sample that displays two groups in the properties file:

{
    "groups": [{
        "title" : "Group 1",
        "properties" : [{
            "title": "Title",
            "property": "title",
            "text": {}
        }]
    },

    {
        "title" : "Group 2",
        "properties" : [
              {
            "title": "Image",
            "property": "image",
            "image": {}
            },

        ]
    }
    ]

}

And it looks like this in Elements…

CleanShot 2024-08-01 at 8 .08.49@2x
CleanShot 2024-08-01 at 8 .08.49@2x1920×1260 403 KB

Hope that helps!

3

Dan that’s what I tried before not sure it works with all the properties I have, trying to group into sections, still might not be understanding
I was able to group multiple images that was about it

4

creating my own pixel control area in Elements, brilliant program / app, added a couple more, except image bug in preview

https://www.dropbox.com/scl/fo/9t3kykn53r9m8x0lnrgvp/AFI5ft1DUWbXfvlnIWSCxe4?rlkey=d4hd7rwy6rs340b380rqwuwij&st=nntsod7b&dl=0
5

Reason for larger increments, example z index in tailwind is in 10s or their website shows this

6

We support an items array in sliders so you could do this:

{
  "title": "Z Index",
  "id": "zIndex",
  "format": "z-{{value}}",
  "slider": {
    "default": "0",
    "items": [
      {
        "value": "0",
        "title": "0"
      },
      {
        "value": "10",
        "title": "10"
      },
      {
        "value": "20",
        "title": "20"
      },
      {
        "value": "30",
        "title": "30"
      },
      {
        "value": "40",
        "title": "40"
      },
      {
        "value": "50",
        "title": "50"
      }
    ]
  }
},
2 Likes
7

works a treat excellent

8

Ah, forgot about this :crazy_face: Have added it to the dev docs :nerd_face:

1 Like
9

Dan finally worked out groups in custom HTML, using your example

Also played a bit more with sections containers etc, get the layered approach, kind of just understanding where you want to target, might be the built in drop in sections you could be able to see the layout but only edit as is, might help when you first use Elements

Screenshot 2024-08-03 at 10.09.36
Screenshot 2024-08-03 at 10.09.361920×1116 515 KB

1 Like
10

Looking good, it gets very addictive building custom components :smiling_face:

11

updated with groups and the z-index increments of ten,

https://www.dropbox.com/scl/fo/9t3kykn53r9m8x0lnrgvp/AFI5ft1DUWbXfvlnIWSCxe4?rlkey=d4hd7rwy6rs340b380rqwuwij&st=wl3ul1lt&dl=0
1 Like