# In progress custom component

**URL:** <https://forums.realmacsoftware.com/t/in-progress-custom-component/43947>\
**Category:** Elements API\
**Created:** [July 28, 2024, 3:45pm UTC](https://forums.realmacsoftware.com/t/in-progress-custom-component/43947 "2024-07-28T15:45:52Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [July 28, 2024, 3:45pm UTC](https://forums.realmacsoftware.com/t/in-progress-custom-component/43947/1 "2024-07-28T15:45:52Z")

</div>

need to share file

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [July 28, 2024, 3:57pm UTC](https://forums.realmacsoftware.com/t/in-progress-custom-component/43947/2 "2024-07-28T15:57:31Z")

</div>

it does not show all the code I copied  
what is the best way to share

```auto

```

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [July 28, 2024, 4:09pm UTC](https://forums.realmacsoftware.com/t/in-progress-custom-component/43947/3 "2024-07-28T16:09:58Z")

</div>

You should be able to paste your code here, use the icon above, so it stays formatted correctly, see the gif below…

![CleanShot 2024-07-28 at 5 .07.30](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/7/e/7ed739e5cc0e15cf244957442487c6f4a549ad56.gif)

If you want to share a file, you could upload it to your server as a zip or send it to an online file sharing like [File.io](https://www.file.io) or [WeTransfer](https://wetransfer.com).

Hope that helps ☺

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [July 28, 2024, 4:11pm UTC](https://forums.realmacsoftware.com/t/in-progress-custom-component/43947/4 "2024-07-28T16:11:43Z")

</div>

```auto
 <style>
        
        .cont {
            perspective: 600px;
            --tzx2: calc({{panes}} / 2);
             
        }
        
        .cube {
            position: relative;
            transform-style: preserve-3d;
            transform: rotateX(-30deg) rotateY(-45deg);
            height: {{panes}};
           width: {{panes}};
             background: red;
            animation: spin 5s infinite linear;
        }
        
        .panel {
            position: absolute;
           height: {{panes}};
           width: {{panes}};
            
            border: 1px solid #ccc;
        }
        
        .pf { transform: rotateY( 0deg) translateZ(var(--tzx2)); }
        .pb { transform: rotateY(180deg) translateZ(var(--tzx2)); }
        .pr {transform: rotateY( 90deg) translateZ(var(--tzx2)); }
        .pl { transform: rotateY(-90deg) translateZ(var(--tzx2)); }
        .ptp { transform: rotateX( 90deg) translateZ(var(--tzx2)); }
        .pbm { transform: rotateX(-90deg) translateZ(var(--tzx2)); }

        @keyframes spin {

0% {

  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}

10% {

  transform: rotateX(36deg) rotateY(36deg) rotateZ(36deg);
}

20% {

  transform: rotateX(72deg) rotateY(72deg) rotateZ(72deg);
}

30% {

  transform: rotateX(36deg) rotateY(36deg) rotateZ(72deg);
}

40% {

  transform: rotateX(146deg) rotateY(146deg) rotateZ(36deg);
}

50% {

  transform: rotateX(36deg) rotateY(180deg) rotateZ()144deg;
}

60% {

  transform: rotateX(-146deg) rotateY(-36deg) rotateZ(-72deg);
}

70% {

  transform: rotateX(-108deg) rotateY(-108deg) rotateZ(-36deg);
}

80% {

  transform: rotateX(-72deg) rotateY(-72deg) rotateZ(-72deg);
}

90% {

  transform: rotateX(-36deg) rotateY(-36deg) rotateZ(-36deg);
}

100% {

  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
}
    </style>

<div class="flex items-center justify-center h-screen bg-gray-200">
    <div class="cont">
        <div class="cube ">
            <div class="panel pf {{pfc}}"></div>
            <div class="panel pb {{pfb}}"></div>
            <div class="panel pr {{pfr}}"></div>
            <div class="panel pl {{pfl}}"></div>
            <div class="panel ptp {{tp}}"></div>
            <div class="panel pbm {{bm}}"></div>
        </div>
    </div>
</div>

```

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [July 28, 2024, 4:12pm UTC](https://forums.realmacsoftware.com/t/in-progress-custom-component/43947/5 "2024-07-28T16:12:28Z")

</div>

properties

{  
“groups”: [  
{  
“title”: “Untitled”,  
“icon”: “paintpalette”,  
“properties”: [

{  
“title” : “Cube Size”,

```
  "id": "panes",
  "format": " {{value}}px ",
  "slider": {
	  "default" : 100,
	  "min" : 100,
	  "max" : 250,
	  "units": "px",
      "round": true
	  
  }

```

},  
{  
“title”: “Front Color”,  
“id”: “pfc”,  
“format”: “bg-{{value}}”,  
“themeColor”: {  
“default”: {  
“name”: “red”,  
“brightness”: 300  
}  
}  
},  
{  
“title”: “Back Color”,  
“id”: “pfb”,  
“format”: “bg-{{value}}”,  
“themeColor”: {  
“default”: {  
“name”: “red”,  
“brightness”: 300  
}  
}  
},  
{  
“title”: “Right Color”,  
“id”: “pfr”,  
“format”: “bg-{{value}}”,  
“themeColor”: {  
“default”: {  
“name”: “red”,  
“brightness”: 300  
}  
}  
},  
{  
“title”: “Left Color”,  
“id”: “pfl”,  
“format”: “bg-{{value}}”,  
“themeColor”: {  
“default”: {  
“name”: “red”,  
“brightness”: 300  
}  
}  
},  
{  
“title”: “Top Color”,  
“id”: “tp”,  
“format”: “bg-{{value}}”,  
“themeColor”: {  
“default”: {  
“name”: “red”,  
“brightness”: 300  
}  
}  
},  
{  
“title”: “Bottom Color”,  
“id”: “bm”,  
“format”: “bg-{{value}}”,  
“themeColor”: {  
“default”: {  
“name”: “red”,  
“brightness”: 300  
}  
}  
},  
]

```
}
]

```

}

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [July 28, 2024, 4:17pm UTC](https://forums.realmacsoftware.com/t/in-progress-custom-component/43947/6 "2024-07-28T16:17:14Z")

</div>

not worked out how to set colours at beginning, in this format you need to change colours and cube size. the file just opens fine  
once its working and saved works fine

in properties adjust panes min to 1 and max to 500

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [July 28, 2024, 4:27pm UTC](https://forums.realmacsoftware.com/t/in-progress-custom-component/43947/7 "2024-07-28T16:27:58Z")

</div>

still need to share files what does everyone else use

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [July 28, 2024, 4:42pm UTC](https://forums.realmacsoftware.com/t/in-progress-custom-component/43947/8 "2024-07-28T16:42:43Z")

</div>

Got the project from your dropbox. Downloaded as folder so just needed to add .elements to the end of it and it worked just great 👍

btw. You could move your style code into the Styles tab to keep things more manageable if you wanted.

 ![CleanShot 2024-07-28 at 5 .43.28@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/6/7/675a48c8a06292d168cb737de1253a7a86454d42.png)

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [July 28, 2024, 4:51pm UTC](https://forums.realmacsoftware.com/t/in-progress-custom-component/43947/9 "2024-07-28T16:51:52Z")

</div>

cool, had to work out to use calc and properties to divide by 2, this is really powerful stuff, excellent software

ah I wasn’t sure if the {{value}} property would work in there, I will try, if so I have a lot more options, I did try originally but may have not understood at that time, need to add animation speed, images add to panes and some text etc, then I think I may have better understanding,

so my dropbox link worked, never used links in db before

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [July 28, 2024, 5:11pm UTC](https://forums.realmacsoftware.com/t/in-progress-custom-component/43947/10 "2024-07-28T17:11:00Z")

</div>

Yes, {{value}} works in the Styles area 😉

Here’s an updated doc with the css in the styles area:  
[https://realmacdan.smmall.cloud/MTcyMjE4NjYwMDk5MA](https://realmacdan.smmall.cloud/MTcyMjE4NjYwMDk5MA)

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [July 28, 2024, 5:24pm UTC](https://forums.realmacsoftware.com/t/in-progress-custom-component/43947/11 "2024-07-28T17:24:38Z")

</div>

Dan thanks cool  
Now I know a couple of things from this exercise I can generate a lot of variables and use the {{values}} to perform a lot of things with one slider, not read all the docs yet, is there will there be a function to loop this would help generating a lot of stuff  
Again powerful stuff other should beable able to create really cool components all ready great what level next

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [July 28, 2024, 6:43pm UTC](https://forums.realmacsoftware.com/t/in-progress-custom-component/43947/12 "2024-07-28T18:43:22Z")

</div>

You can loop through items, like pages, resources, and data collections…

[This project example](https://forums.realmacsoftware.com/t/building-a-page-using-only-custom-components-project-download/43945) has components that loop through pages and collections, have a look at that file to see if it helps.