UI Display and Visibility Example

[ickshonpe]

Objective

An example demonstrating how Display and Visibility work in Bevy UI.

fixes #5380
related #5368

Changelog

• Added the example flex_display.rs.

[github-actions]

You added a new example but didn't add metadata for it. Please update the root Cargo.toml file.

[rparrett]

With all of the nodes arranged in a hierarchy as they are, aren't Display::None and Visibility::Hidden behaving pretty identically here?

Would it be more interesting to show the clickable nodes in a single parent flex container?

[ickshonpe]

With all of the nodes arranged in a hierarchy as they are, aren't Display::None and Visibility::Hidden behaving pretty identically here?

Would it be more interesting to show the clickable nodes in a single parent flex container?

I'm not quite sure what you mean, the behaviour is quite different isn't it? Display::None hides the node and all its descendants, while Visibility::Hidden hides itself and only its children that are Visibility::Inherited.

[rparrett]

I'm not quite sure what you mean, the behaviour is quite different isn't it? Display::None hides the node and all its descendants, while Visibility::Hidden hides itself and only its children that are Visibility::Inherited.

That's fair.

When I think of the difference between Display::None and Visibility::Hidden though, the first thing that comes to mind is that Visibility::Hidden doesn't affect layout, but Display::None does.

Although I'm not sure how to demonstrate both properties simultaneously.

"2" is Visibility::Hidden
+-----------+          
|+-+     +-+|          
||1|     |3||          
|+-+     +-+|          
+-----------+
          
"2" is Display::None
+-----------+          
|+-+ +-+    |          
||1| |3|    |          
|+-+ +-+    |          
+-----------+  

[ickshonpe]

Oh I get it, you are right. It needs to demonstrate how Display::None collapses the layout too, yes.

[ickshonpe]

Should be able to do something like that with the inner nodes too somehow.

[ickshonpe]

Oh I know I can stuff each node with a second invisible panel.

That's much better.

[omwda]

Looking good :)

[doup]

Approved with a couple of nits that I think are worth adding… but, up to you.
Nice example 👍

[alice-i-cecile]

@ickshonpe can you fix the conflicts and make a call on the nits? I think they're an improvement, but I won't block on them.

[ickshonpe]

@ickshonpe can you fix the conflicts and make a call on the nits? I think they're an improvement, but I won't block on them.

Yep I'll take a look

[github-actions]

You added a new example but didn't update the readme. Please run cargo run -p build-templated-pages -- update examples to update it, and commit the file change.

[github-actions]

You added a new example but didn't update the readme. Please run cargo run -p build-templated-pages -- update examples to update it, and commit the file change.

[github-actions]

You added a new example but didn't update the readme. Please run cargo run -p build-templated-pages -- update examples to update it, and commit the file change.

[github-actions]

You added a new example but didn't update the readme. Please run cargo run -p build-templated-pages -- update examples to update it, and commit the file change.

[github-actions]

You added a new example but didn't update the readme. Please run cargo run -p build-templated-pages -- update examples to update it, and commit the file change.

[ickshonpe]

Everything resolved, should be ready as long as its passes CI checks.