Skip to content

Commit 9e8eb87

Browse files
authored
Add border radius release notes (#1353)
1 parent bece73c commit 9e8eb87

File tree

2 files changed

+29
-1
lines changed

2 files changed

+29
-1
lines changed
Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,29 @@
1-
TODO
1+
Border radius for UI nodes has been a long-requested feature for Bevy. Now it's supported!
2+
3+
To apply border radius to a UI node, there is a new component [`BorderRadius`](https://dev-docs.bevyengine.org/bevy/prelude/struct.BorderRadius.html). The [`NodeBundle`](https://dev-docs.bevyengine.org/bevy/prelude/struct.NodeBundle.html) and [`ButtonBundle`](https://dev-docs.bevyengine.org/bevy/prelude/struct.ButtonBundle.html) bundles have a new field in place for this called `border_radius`. For example:
4+
5+
```rs
6+
commands.spawn(NodeBundle {
7+
style: Style {
8+
width: Val::Px(50.0),
9+
height: Val::Px(50.0),
10+
// We need a border to round a border, after all!
11+
border: UiRect::all(Val::Px(5.0)),
12+
..default()
13+
},
14+
border_color: BorderColor(Color::BLACK),
15+
// Apply the radius to all corners.
16+
// Optionally, you could use `BorderRadius::all`.
17+
border_radius: BorderRadius {
18+
top_left: Val::Px(50.0),
19+
top_right: Val::Px(50.0),
20+
bottom_right: Val::Px(50.0),
21+
bottom_left: Val::Px(50.0),
22+
},
23+
..default()
24+
});
25+
```
26+
27+
There's a [new example](https://github.com/bevyengine/bevy/blob/main/examples/ui/rounded_borders.rs) showcasing this new API, a screenshot of which can be seen below:
28+
29+
![`rounded_borders` example](./rounded_borders.png)
Loading

0 commit comments

Comments
 (0)