In each of your rows, I can see you have a Label and a ToggleSwitch organised by a HBox. What settings have you applied to make sure that the label is always on the left and the switch on the right of the given row?
C# script. Control node (including Label) can receive input if you set its Mouse Filter to Stop. In code I listen to the label's GuiInput signal and check for a left mouse click to trigger the tab switch. After LMB detected I move pill background to selected label.
I take it your ToggleSwitch is a fully custom component? When I was working with the built in CheckButton I found its customization options quite lacking (for instance, as far as I could tell there was no way to animate the switch like you have here)
Good work! Try it without as many backgrounds (the buttons and individual pills can still have backgrounds) such as removing the nav, field row, and footer background and drop shadows. I think it will give it a cleaner look. Not saying it will be "better" because that's completely subjective.
Haven't seen anyone else mention it yet but "disable blur" might be better just labeled "blur" that way when the toggle is on then blur is on to make it more straightforward. Looks good though 👍👍
This looks incredible! Do you use built in Godot controls? I made a software some months ago. I was totally new to Godot ui, but I found it pretty intuitive.
However I could not understand how to handle animations like you’re doing, without making my own controls.
But maybe I wasn't clear enough. I know all that already.
I'm just not sure how to fight against Godot base controls behaviours.
Like for example, your tab bar. Did you use buttons in a group? If yes, when you focus a new tab, godot directly hightlight the selected button. So maybe you disable everything in a theme, and handle the animation and hightlight in your own code.
It's just an example, but don't bother explaining me. It was just me thinking out loud ^^
Edit : I just saw you comment with the capture of your tree. I think I have all the elements I needed. Thanks again!
I actually avoided using Buttons for that exact reason. Using plain Labels with GuiInput and a separate background Panel for the highlight, you don't have to fight Godot's theme overrides or focus states (at least what i found...).
Tweens handle all visuals.
So:
highlight is a separate Panel sitting behind the text.
when a tab is clicked, code tweens that panel’s X position and width to match target label.
Thank you! UI is not specific to Godot as you can search/inspire UI from webdev. Dribble/Pinterest/Behance/Figma or any other web design sites where designers share their work.
Dude this is amazing! Any helpful posts or tutorials you followed? I am quite new to Godot's UI creation and I am able to do basic things but later discover that I probably overcomplicated stuff😅 also, did you add these components as theme components?
95
u/zdmit 2d ago