I want to create the sidebar. Like the sidebar menu.
You can click a arrow button to expand the whole menu layout. Like this pic.
And I found the similar question 4 years age, but there is not answer.
(How to create sidebar like in pubg?)
Is there any possible to use the menu anchor to create?
That’s one way to do it. Or you could animate a panel canvas position / size if you want ultimate control.
Yes, I try to use menu anchor to create. But I think the placement setting have some problems, my sidebarmenus can not display completely in the anchor position.
As for the animate way, this part I am not really understand. Maybe I need the time to study. Do you have any recommend sources.
Anyway, really thanks! You are so kind!
You can try doing it manually:
We collapse the text pieces with a mouse click:
You could isolate which mouse button does what. This is the default behaviour where LMB is consumed by the button and does not extend the panel, any other mouse button would.
Since each entry is a separate widget, you could easily achieve this highlight effect across the line:
Oh my god, super thanks.
Let me think and try in my case!!!
But in your demo, I think it is similar to pop-up the text.
How to look like a panel expand. And then inside the panel, I just can customize my information I want to display.
To start with, I’d modify the entry so the size always looks fine:
So when you add the panel to the canvas:
Making the behaviour a bit more reasonable:
To customise it:
You can do it with images as well. And then use event dispatchers to make every entry perform a unique call.
Look like you don’t use the menu anchor to arrive this result, right?
Oh, you are super nice. Do you have any contact way? Maybe I can discuss with you more detail.
There is no anchor here. I feel a menu anchor would be a bit more complicated, especially when it comes to comms, but could work. Anchor is great for context menus, this is just a collapsible panel. Seems like this method would work well enough.
And my inbox is rather full atm.
Ok! Thank you so much!
I will study for your method.
So sad, maybe you can join my discord chat, which I just created.
Let me check, you build three user widget(wPanel, wPanelentry, wAnimatedPanelParent).
And then you build the blueprint in wPanel widget, right?
As a result, we expand the panel by this blueprint structure, right?
But I get lost in part of “We collapse the text pieces with a mouse click:”
I can not create the “on mouse button down” and “Return node”.
I used the onbuttonclick to replace the “on mouse button down” function.
I can arrive the similar result.
But next I want to let my layout change when I clicked the button.
There is a horizontal box in the bottom of my layout and the right hand side is the sidebar menu.
And then, I hope the horizontal box will scale when I chick the button to expand the sidebar menu. How can I do, must use animation?
First pics:
The result I wanted:
→
wPanel is set to auto sizeI can not create the “on mouse button down” and “Return node”.
Any user widget that you create can:
Panel Entry if you’re after the effect in the original post:
Oh, thanks too much:)
You are really so kind! I will try immediately.
If you needed to animate the effect, a different approach would be needed. I’d probably lerp this value:
It dictates how much space percentage-wise the widget takes in the parent container. But then again, we do not know enough about the end result, what else needs to be added, whether this needs to be fullscreen and how dynamic.
You presented a snippet only, a fragment of the menu. You normally build the interface the other way round. Big pieces first, and only then populate it with smaller panels. With this design pipeline, you may need to redo the whole thing several times.
Working on small pieces is fine providing you’ve got the grand design to work towards to.
You can use the canvas panel for roughly blocking things out first, consider looking into how anchors (not menu anchors) work. Pretty critical for design that needs to adapt to resolution.
I curious about if there is a text or button in your horizontal box, what’s the result after expanding. Will it auto scale? Instead just cover this horizontal box, right?
Btw, you just edit the mainwidget and add the blueprint of wPanelEntry, right?
You can see it all in the first image, bottom left corner, namely:
It auto-expands, as in the attached animation.
Btw, you just edit the mainwidget and add the blueprint of wPanelEntry, right?
Sorry, my English is not good. (I come from Taiwan)
My question is what’s the change about horizontal box. Will it scale?
So you don’t change the wPanel layout, right.
Scale what? You can see the result in the animation - is this not the effect you’re after? That’s what I understood. If that’s not it, we may need more info / details.
The widget in the animation is transparent, you can see the white border is not just hiding behind the panel, it resizes accordingly.
So you don’t change the wPanel layout, right.
No, but are we even still talking about the thing you originally posted?
Ok, Let me explain my question again!
Like this pics, when I click a arrow button, it will expand the righthandside panel.
But the original bottom horizontal box will scale to moderate size.
Really thanks!!!
