Button list with babylonjs

Hello guys,

Please i need to make buttons list like the attached images.

I have 2 button , when i click in the first button , the childs button appears . And when i click the second button the first childs button diseaper and the second button appears .
Also it is better to make it with css instead in the 3d scene , knowing that buttons are interacting with the mesh ?

Thanks a lots

Hello there! All of this can be accomplished using the Babylon GUI.

Here is the documentation specifically for buttons. What you’re going to want to is create a stack panel GUI where you are adding and removing buttons to and from the stack panel based on which one is pressed. You can do this with the onPointerClickObservable which is attached to button.

Let me know if you have any further questions about this :slight_smile:

1 Like

Thanks a lot !

I think it is exactly what i need , i used panel.addcontrol(button) to show the chidls buttons , but i dont find how to make them hide . Maybe there is a method like panel.removeControl(button ) ?

Ya. You will want to just remove them from the stack panel. And then add them back. I wonder if changing active to false leaves a blank space or removes it from view and allows the others to be in the right order.

Thank it is working, i changed the size to 0 to hide the undesirable elements, because if it is removed from the stack the order is also changing.

I am facing another problem , i get this result ( attached image ) when the size of the stackpanel is changing , like if the axe of the stackpanel is ‘center’ . I need to make the axis on the top of the stackpanel .I tried all the function in the stackpanel Api but none of them is working , any help please ?

Thanks a lot

Without a pg I’m not entirely sure what is wrong. Have you tried playing with the position? Perhaps you could try adding an invisible element before them all.

image

Set the vertical alignment to Top and then the position down to 50%. You might want to do like 40% sih to account for the height of the stack panel.

1 Like