Add sticky ui nodes #21648
Add sticky ui nodes #21648
Conversation
PPakalns
changed the title
alice-i-cecile
added
A-UI
|
It looks like your PR has been selected for a highlight in the next release blog post, but you didn't provide a release note. Please review the instructions for writing release notes, then expand or revise the content in the release notes directory to showcase your changes. |
alice-i-cecile
added
C-Feature
There was a problem hiding this comment.
It looks like it should work fine.
I'm not sure about the API and implementation though, but I've been working too much on text and forgotten everything I knew about CSS. I'd like an example, like alice already asked for. It's quite limited compared to position: sticky, we should at least support bottom and right alignment I think.
Probably this is okay for an initial step though and it's simple enough that we can easily replace it completely if it's not possible to extend the implementation to support more features.
crates/bevy_ui/src/ui_node.rs
Outdated
| /// Determines which axes of a node are *sticky* during scrolling. | ||
| /// | ||
| /// A **sticky** node maintains its position along the specified axes | ||
| /// instead of moving with its scrolled parent content when [`ScrollPosition`] is applied. | ||
| #[derive(Component, Debug, Clone, Default, Deref, DerefMut, Reflect)] | ||
| #[reflect(Component, Default, Clone)] | ||
| pub struct ScrollSticky(pub BVec2); | ||
|
|
||
| impl From<BVec2> for ScrollSticky { | ||
| fn from(value: BVec2) -> Self { | ||
| Self(value) | ||
| } | ||
| } |
There was a problem hiding this comment.
I don't like the plain BVec2 here, I'd prefer named fields or some helpers like:
impl ScrollSticky {
fn left() -> Self {
Self(BVec2::new(true, false))
}
// etc..
}There was a problem hiding this comment.
I would like to avoid implying in API that ScrollSticky has method left. What does it mean?
Sticky headers can be achieved with this feature only by combining multiple features:
ZIndex, BackgroundColor, ScrollSticky, parent with display Grid.
Users need to carefully mix multiple features to get the final behavior working. So I would like to avoid implying any specific use case in this level of API.
See example: 5ab4c9a
There was a problem hiding this comment.
It works fine with Flex as well. You don't have to be especially careful.
left does carry incorrect implications though, you are right. I was overthinking things, this isn't an implementation of the css sticky positions API, it's just an override that ignores the inherited scroll positions when it's set.
alice-i-cecile
added
the
M-Release-Note
crates/bevy_ui/src/ui_node.rs
Outdated
| /// Determines which axes of a node are *sticky* during scrolling. | ||
| /// | ||
| /// A **sticky** node maintains its position along the specified axes | ||
| /// instead of moving with its scrolled parent content when [`ScrollPosition`] is applied. | ||
| #[derive(Component, Debug, Clone, Default, Deref, DerefMut, Reflect)] | ||
| #[reflect(Component, Default, Clone)] | ||
| pub struct ScrollSticky(pub BVec2); | ||
|
|
||
| impl From<BVec2> for ScrollSticky { | ||
| fn from(value: BVec2) -> Self { | ||
| Self(value) | ||
| } | ||
| } |
There was a problem hiding this comment.
It works fine with Flex as well. You don't have to be especially careful.
left does carry incorrect implications though, you are right. I was overthinking things, this isn't an implementation of the css sticky positions API, it's just an override that ignores the inherited scroll positions when it's set.
crates/bevy_ui/src/ui_node.rs
Outdated
| /// instead of moving with its scrolled parent content when [`ScrollPosition`] is applied. | ||
| #[derive(Component, Debug, Clone, Default, Deref, DerefMut, Reflect)] | ||
| #[reflect(Component, Default, Clone)] | ||
| pub struct ScrollSticky(pub BVec2); |
There was a problem hiding this comment.
I think the name ScrollSticky carries the wrong implications. It should be called IgnoreScroll or something. And the description is misleading too, the node isn't sticky, it's fixed in place.
There was a problem hiding this comment.
True, I was focusing on sticky headers, but IgnoreScroll would be a lot better.
I will update PR.
There was a problem hiding this comment.
Renamed to IgnoreScroll . PR updated.
…d variable names.
alice-i-cecile
added
S-Ready-For-Final-Review
4 participants
Objective
Add UI nodes that can be used as sticky row, column headers.
Solution
Add ui nodes that ignore parent node scroll position. This approach only allows for row, column headers that are located at the top and at the left side of the parent node. Multiple rows, columns can be used as headers.
Testing
Extended scroll example.
Prior art
Used the same approach to implement sticky elements in egui taffy (sticky)
Showcase
sticky-2025-10-24_23.22.28.mov