How to show button as "pressed" state?

Unity Engine
1

Hi. I’m trying to implement tab-like control, like Unity’s built in Lighting Window.

It shows current tab as button with “pressed” style, but I can’t find how to do it with UIElements.

Currently, I mimicked it by using VisualElement.SetEnabled(false), but its looks not good.

Any ideas? Thanks.

2

In the demo project (Tanks) if you use the UI Elements Debugger and use “pick element” on one of the buttons, then mousedown on it, you can see under “pseudostates” the words “hover” and “active”. Then if you check in the USS for the button

.menu-button:active {
background-color: rgba(75, 75, 75, 0.84);
}

How to apply “active” pseudostate to your own control, I don’t kno

3

Yes, I found exactly that and I can’t find the method for changing control’s state virtually.

4

Hi Kichang-Kim,

Currently the only way to set the active pseudo state is to use the Clickable manipulator.

Having said that you can also implement the active state yourself. Here’s a tab example that I worked on a while ago which can help you get started.

The associated style sheet (TabArea.uss) that somehow cannot be uploaded here…

.tab-area,
.tab-content-container {
    flex: 1;
}

.tab {
    width: 60px;
    padding-top: 1px;
    padding-bottom: 2px;
    background-color: rgb(49, 49, 49);
    border-top-width: 2px;
    -unity-text-align: middle-center;
}

.tab:hover {
    background-color: rgb(126, 126, 126);
}

.tab--active {
    background-color: #4C4C4C;
    border-color: rgb(81, 127, 255);
}

.tab-container {
    flex-shrink: 0;
    flex-direction: row;
    background-color: rgb(49, 49, 49);
    border-bottom-width: 1px;
    border-color: rgb(100, 100, 100);
}

5349621–540267–TabArea.cs (3.45 KB)

1 Like
5

I am confused with that system:

I have a button with

.menu-button:hover {
    background-color: rgb(0, 28, 78);
}

.manu-button:active {
    background-color: rgb(255, 20, 50);
}

:hover works fine, :active is not triggered, when I click the Button. When does it trigger?

1 Like
6

The active state should be set when:

  • The button is clicked (mouse down)
  • While the button is clicked and the mouse hovers the button

The active state is reset when the mouse button is released.

7

Ah the error is right there in plain sight! .m__e__nu-button:hover vs. .m__a__nu-button:active, my bad :slight_smile:

8

It seems to me that not all style properties are allowed in pseudo states:
E.g. background-color and color work fine.
-unity-font-style works in preview but not in play mode or build
cursor works not in preview, playmode or build.
Can you confirm that or did I something wrong again?

9

Please try upgrading your packages to the new versions announced here and ping back if still having issues:

10

Hi @jonathanma_unity , could you post an example code of the Clickable manipulator used to toggle the active pseudostate?

2 Likes