Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

Question Help needed with Visual Element/USS structure

Discussion in 'UI Toolkit' started by EspyGDS, Mar 23, 2023.

  1. EspyGDS

    EspyGDS

    Joined:
    Mar 11, 2020
    Posts:
    10
    I would like to get some help with setting up the right uss structure because it seems that with everything I come up with there are some problems and maybe i'm overlooking something.

    So let's say for example I have 2 toggle buttons that are the same in the functional functionality but behave in different ways visually. And the main thing I would like to do is changing the border radius corners of those buttons with how big the radius is and which corners are actually being rounded.

    Button 1 is structured in the following way and build up in code with a custom control
    (visualelement) button element
    - (child visual element) background
    - (child visual element) overlay

    Same with Button 2 but it looks like this
    (visualelement) button element
    - (child visual element) background
    - (child visual element) shadow

    To be clear since these are custom controls build via script you can't edit the child visual elements in the ui builder nor add style classes to them. Also since masking does not work yet if I want to change de radius of a button i will have to change it the same way on the background/overlay/shadow element to make it consistent. (This is mainly for the example I know there are packages to make masking work somehow but that is not the point of this question.)

    Now I could make UxmlAttributesDescriptions to set the radius of the corners but since all child visual elements will need values as well this would become a very big and ever expanding list of variables which if possible I would like to avoid. I could also make a different class and different style sheet for every single button that needs to be only slightly different but for as many different buttons as i'm going to need (and other elements that have the same issues) it would result into a lot of duplicate code.

    So I was wondering if there is a better way to structure this that will minimize me writing duplicate code/empty classes while still having a lot of flexibility for changing small things.

    If more information is needed or something is not clear please let me know.