bevy_maid

a micro dsl for bevy ui, inspired by maud

usage

use bevy_maid::{html, tags::*};
use bevy::{color::Color, ui::{Val, BorderRadius, AlignItems, JustifyContent}};

#[derive(Default)]
struct CustomButtonAttrs {
    pub width: Option<Val>,
    pub height: Option<Val>,
    pub border: Option<UiRect>,
    pub border_radius: Option<BorderRadius>,
    pub text: Option<String>,
    pub font_size: Option<f32>,
    pub color: Option<Color>,
}

fn custom_button(attrs: CustomButtonAttrs) -> impl Bundle {
    html! {
        button,
        background_color(color: Color::BLACK),
        node(
            width: attrs.width,
            height: attrs.height,
            border: attrs.border,
            justify_content: JustifyContent::Center,
            align_items: AlignItems::Center,
            border_radius: attrs.border_radius
        )
    }
}

fn setup(mut commands: Commands) {
    commands.spawn(html! {
        custom_button(color: Color::WHITE), border_color(color: Color::WHITE) {
            text(value: attrs.text),
            text_font(
                font_size: attrs.font_size
            ),
            text_color(color: attrs.color),
            text_shadow
        }
    })
}

roadmap

• custom attrs derive macro (there's already an internal declarative macro for it lmao)
• better component/attr handling
  • specifically, the following syntax would be nice
  • node(background_color: Color::BLACK)
• passing resources into element constructors
  • the primary usecase would be having access to AssetServer at creation time
• allow optional collapsing of parent and child components
  • use case would be text_color(color: Color::WHITE) { "hiii~" } to avoid the current awkward syntax
• tuple struct aware html!
  • node, background_color(Color::BLACK)
• spread syntax for attrs
  • node(..attrs)

compatibility

bevy	bevy_maid
0.18	0.1