//! This example shows how to setup a basic counter app using feathers //! //! To use feathers in your bevy app, you need to use the `bevy_feathers` feature use bevy::{ feathers::{ controls::FeathersButton, dark_theme::create_dark_theme, display::caption, theme::{ThemeBackgroundColor, UiTheme}, tokens, FeathersPlugins, }, prelude::*, ui_widgets::Activate, }; #[derive(Resource)] struct Counter(i32); #[derive(Component, Default, Clone)] struct CounterText; fn main() { App::new() .add_plugins(( DefaultPlugins, // Don't forget to add the plugin. // Make sure you are using FeathersPlugins with an `s` FeathersPlugins, )) // Configure feathers to use the dark theme .insert_resource(UiTheme(create_dark_theme())) .insert_resource(Counter(0)) .add_systems(Startup, scene.spawn()) .add_systems( Update, update_counter_text.run_if(resource_changed::), ) .run(); } fn scene() -> impl SceneList { bsn_list! { Camera2d -- @demo_root() } } fn demo_root() -> impl Scene { bsn! { Node { width: percent(100), height: percent(100), align_items: AlignItems::Center, justify_content: JustifyContent::Center, } ThemeBackgroundColor(tokens::WINDOW_BG) Children[ Node { align_items: AlignItems::Center, justify_content: JustifyContent::Center, } Children [ @FeathersButton on(|_activate: On, mut counter: ResMut| { counter.0 -= 1; }) Children [ @caption("-1") ] -- Node { margin: UiRect::horizontal(px(10.0)), } @caption("0") CounterText -- @FeathersButton on(|_activate: On, mut counter: ResMut| { counter.0 += 1; }) Children [ @caption("+1") ] ] ] } } fn update_counter_text( counter: Res, mut counter_text: Single<&mut Text, With>, ) { info!("Counter updated"); counter_text.0 = format!("{}", counter.0); }