Can you send me your code? Do you have 3 pieces of code here or just 1?
1 Like
How can I replace the “valueProduct” in my data so that my HTML code works correctly?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<title>Number Animation Cards</title>
<script
src="https://cdn.jsdelivr.net/npm/alpinejs@2.x.x/dist/alpine.js"
defer
></script>
<style>
.card-container33 {
display: block;
width: 100%;
}
.card33 {
display: flex;
align-items: center;
width: 100%;
height: 70px;
margin-bottom: 10px;
border: 1px solid #E6E8EA;
padding: 5px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 15px;
overflow: hidden;
transition: transform 0.3s, box-shadow 0.3s;
}
.card-image33 {
width: 100px;
height: 100px;
margin-right: 40px;
transform: scale(1.5);
opacity: 0.7;
transition: opacity 0.3s, transform 0.3s;
}
.card33:hover {
transform: translateY(-5px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
.card33:hover .card-number33 {
font-weight: bold;
}
.card33:hover .card-image33 {
opacity: 1;
}
.card-header33 {
font-size: 1.1em;
font-weight: bold;
}
.card-number33 {
font-size: 1.2em;
}
.card-content33 {
display: flex;
flex-direction: column;
}
</style>
</head>
<body>
<div class="card-container33">
<div
class="card33"
x-data="numberAnimation("valueProduct", 2000)"
x-init="startAnimation"
>
<img
src="data:image/svg+xml,%3csvg width='100px' height='100px' viewBox='-2.4 -2.4 28.80 28.80' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg id='SVGRepo_bgCarrier' stroke-width='0'%3e%3c/g%3e%3cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3e%3c/g%3e%3cg id='SVGRepo_iconCarrier'%3e%3cpath d='M4.97883 9.68508C2.99294 8.89073 2 8.49355 2 8C2 7.50645 2.99294 7.10927 4.97883 6.31492L7.7873 5.19153C9.77318 4.39718 10.7661 4 12 4C13.2339 4 14.2268 4.39718 16.2127 5.19153L19.0212 6.31492C21.0071 7.10927 22 7.50645 22 8C22 8.49355 21.0071 8.89073 19.0212 9.68508L16.2127 10.8085C14.2268 11.6028 13.2339 12 12 12C10.7661 12 9.77318 11.6028 7.7873 10.8085L4.97883 9.68508Z' stroke='%234d4d4d' stroke-width='1.5'%3e%3c/path%3e%3cpath opacity='0.5' d='M5.76613 10L4.97883 10.3149C2.99294 11.1093 2 11.5065 2 12C2 12.4935 2.99294 12.8907 4.97883 13.6851L7.7873 14.8085C9.77318 15.6028 10.7661 16 12 16C13.2339 16 14.2268 15.6028 16.2127 14.8085L19.0212 13.6851C21.0071 12.8907 22 12.4935 22 12C22 11.5065 21.0071 11.1093 19.0212 10.3149L18.2339 10M5.76613 14L4.97883 14.3149C2.99294 15.1093 2 15.5065 2 16C2 16.4935 2.99294 16.8907 4.97883 17.6851L7.7873 18.8085C9.77318 19.6028 10.7661 20 12 20C13.2339 20 14.2268 19.6028 16.2127 18.8085L19.0212 17.6851C21.0071 16.8907 22 16.4935 22 16C22 15.5065 21.0071 15.1093 19.0212 14.3149L18.2339 14' stroke='%234d4d4d' stroke-width='1.5'%3e%3c/path%3e%3c/g%3e%3c/svg%3e"
alt="Icon"
class="card-image33"
/>
<div class="card-content33">
<div class="card-header33">Product</div>
<div
class="card-number33"
x-text="number.toLocaleString() + ' USD'"
></div>
</div>
</div>
</div>
<script>
function numberAnimation(targetNumber, duration) {
return {
number: 0,
startAnimation() {
const startTime = performance.now();
const updateNumber = (currentTime) => {
const elapsedTime = currentTime - startTime;
const progress = Math.min(
elapsedTime / duration,
1
);
this.number = Math.floor(
progress * targetNumber
);
if (progress < 1) {
requestAnimationFrame(updateNumber);
}
};
requestAnimationFrame(updateNumber);
},
};
}
</script>
</body>
</html>
You can use:
@click=“Title of the action”
to link with an action in Glide!
5 Likes
Have you found the answer to this? I have tried various methods but none have worked for me with your code. Have you tried a newer version of Alpine?
Computed properties don’t work yet, but they should later this week.
7 Likes
It is a promising tool and all my support to it!
But the lack of consistency on the generation may be a problem like the following example:
Use the v2 version. Also, use a data property to determine which circle is highlighted.
1 Like
Any thought on when the components might be able to be used in published apps vs. only in the editor? 
It works.
My mistake was to label the action as to save it (action editor), however the title in the layout part was the one to be used.
thanks @ThinhDinh as well
3 Likes
HTML components should work, we have been using it.
has anyone had issues with the size of the custom component resizing each time on page open or load? it’s a bit jarring when the page resizes every time you need to open a dialog or new page …
HTML and AI modes should both work in published apps now.
6 Likes
I’m seeing sizing issues and will keep working on it!
1 Like
Thank you! 
Thank you
Well I added fairly simply custom prompt that works on the editor and in my published app on desktop PC, but does not work on iPhone. The component normally displays a scrolling banner text. However, it is static on the iPhone: just displays static text, without any scrolling.
Updated:
Works now with some minor prompt editing (variable was not correctly identified):
1 Like
Show Title in a regular headline above a very large star whose color is Red if Value is under 1, Blue if Value is between 1 and 3 and Green if Value is greater than 3 with Value in the center
2 Likes
Hmmm…this component type really does do a good job. Seems a little inconsistent on the ‘star’ size but works consistently and quickly in all other cases.
Show Title in a regular headline above a smaller Subtitle centered above two very large stars. The first star’s color is Red if Value is under 1, Blue if Value is between 1 and 3 and Green if Value is greater than 3 with Value in the center. The second star color is Blue if Value2 is under 1, Green if Value2 is between 1 and 3 and Red if Value2 is greater than 3 with Value2 in the center
If you’re willing to deep dive into the code, you can get the code from the “prompt version”, adjust it and use the HTML version for full control.
Fortunately/unfortunately - I put the No in No-Code.
I want/need/could use some dashboard components that display information tighter and I finally got around to testing Custom Components. Not sure where I would find the prompt version but I do know how to use css classes (which you have kindly supplied in the “Classic” past and I still use).
Any pointers?