Makara Book

Styling in Makara

There are 2 ways to provide custom styles to widgets.

1. Style on widgets directly using properties.
2. Attach an ID or Classes and provide styles via ID or Classes.

Direct styling

fn main() {
    App::new()
        .add_plugins(MakaraPlugin::default())
        .add_systems(Startup, setup)
        .run();
}

fn setup(mut commands: Commands) {
    commands.spawn(
        root_!(
            align_items: AlignItems::Center, // direct styling
            justify_content: JustifyContent::Center; // direct styling
            
            [ text_!("Hello world", font_size: 20.0) ]
        )
    );
}

With ID and Classes

fn main() {
    App::new()
        .add_plugins(MakaraPlugin::default())
        .add_systems(Startup, (setup, setup_styles)) // add this
        .run();
}

fn setup(mut commands: Commands) {
    commands.spawn(
        root_!(id: "root"; [
            text_!("Hello world", id: "text-one", class: "text"),
            text_!("Hello mom", class: "text"),
            text_!("Hello friend", class: "text hello-friend"),
            text_!("Hello stranger", class: "text")
        ])
    );
}

fn setup_styles(mut style: ResMut<CustomStyle>) {
    // via id
    style.bind_id(
        "root",
        Style::new()
            .align_items(AlignItems::Center)
            .justify_content(JustifyContent::Center)
    );
    
    // via id
    style.bind_id("text-one", Style::new().color("red"));
    
    // via class
    style.bind_class(
        "text",
        Style::new().font_size(20.0)
    );
    
    // via class
    style.bind_class(
        "hello-friend",
        Style::new().color("blue")
    );
}

When you run the application:

• root will get AlignItems and JustifyContent styles.
• all texts will have font_size of 20.0.
• only one text with id text-one will have color of red.
• only one text with class hello-friend will have color of blue.

See Style API for more info.