22 releases (7 breaking)
| new 0.8.5 | Apr 10, 2025 |
|---|---|
| 0.7.0 | Apr 4, 2025 |
| 0.2.1 | Mar 31, 2025 |
#1753 in Game dev
1,772 downloads per month
37KB
771 lines
html! Macro
The html! macro creates Bevy UI using HTML-like syntax. It allows for a declarative, structured way to define UI components converted to ECS code at compile time.
Tag Names and Styling
Tag names are optional.
To style or query elements later in your Bevy code, assign a tag name.
To define a style, use the tag name. You can optionally put the associated bevy component's visibility before writing the tag name.
String variables can be used when styling elements to make them more reusable. Elements inherit their parent's variable values, unless the value is reset.
Example
In this example, a generic User tag is made, with children FName and LName. FName and LName use variables in their text content, but in other parts of the code, these value can be set on the User tag.
html!(
<head>
<style>
User {
}
Name {
Node {
column_gap: Val::Px(10.),
..default()
};
}
FName {
$fname = "Error";
Text::from(String::from($fname));
}
LName {
$lname = "Error";
Text::from(String::from($lname));
}
</style>
</head>
<User>
<Name>
<FName></FName><LName></LName>
</Name>
</User>
);
html!(
<head>
<style>
Container {
Node {
flex_direction: FlexDirection::Column,
..default()
};
}
</style>
</head>
<Container>
<User fname="John" lname="Smith" />
<User fname="Jane" lname="Smith" />
</Container>
);
What It Generates
It transforms the HTML into ECS code that defines components and spawns nodes with the specified style and attributes.