diff --git a/Cargo.toml b/Cargo.toml index d1cc8713725ce..b1f9e6c779258 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -1822,6 +1822,16 @@ description = "Demonstrates how the AlignItems and JustifyContent properties can category = "UI (User Interface)" wasm = true +[[example]] +name = "text_wrap_debug" +path = "examples/ui/text_wrap_debug.rs" + +[package.metadata.example.text_wrap_debug] +name = "Text Wrap Debug" +description = "Demonstrates text wrapping" +category = "UI (User Interface)" +wasm = true + [[example]] name = "grid" path = "examples/ui/grid.rs" @@ -1829,6 +1839,7 @@ path = "examples/ui/grid.rs" [package.metadata.example.grid] name = "CSS Grid" description = "An example for CSS Grid layout" + category = "UI (User Interface)" wasm = true diff --git a/examples/README.md b/examples/README.md index 380ed3974f72f..e05b259382c9f 100644 --- a/examples/README.md +++ b/examples/README.md @@ -339,6 +339,7 @@ Example | Description [Relative Cursor Position](../examples/ui/relative_cursor_position.rs) | Showcases the RelativeCursorPosition component [Text](../examples/ui/text.rs) | Illustrates creating and updating text [Text Debug](../examples/ui/text_debug.rs) | An example for debugging text layout +[Text Wrap Debug](../examples/ui/text_wrap_debug.rs) | Demonstrates text wrapping [Transparency UI](../examples/ui/transparency_ui.rs) | Demonstrates transparency for UI [UI](../examples/ui/ui.rs) | Illustrates various features of Bevy UI [UI Scaling](../examples/ui/ui_scaling.rs) | Illustrates how to scale the UI diff --git a/examples/ui/text_wrap_debug.rs b/examples/ui/text_wrap_debug.rs new file mode 100644 index 0000000000000..564fd0160845e --- /dev/null +++ b/examples/ui/text_wrap_debug.rs @@ -0,0 +1,106 @@ +//! This example demonstrates text wrapping and use of the `LineBreakOn` property. + +use bevy::prelude::*; +use bevy::text::BreakLineOn; +use bevy::winit::WinitSettings; + +fn main() { + App::new() + .add_plugins(DefaultPlugins) + .insert_resource(WinitSettings::desktop_app()) + .add_systems(Startup, spawn) + .run(); +} + +fn spawn(mut commands: Commands, asset_server: Res) { + commands.spawn(Camera2dBundle::default()); + + let text_style = TextStyle { + font: asset_server.load("fonts/FiraSans-Bold.ttf"), + font_size: 14.0, + color: Color::WHITE, + }; + + let root = commands + .spawn(NodeBundle { + style: Style { + flex_direction: FlexDirection::Column, + size: Size::new(Val::Percent(100.), Val::Percent(100.)), + ..Default::default() + }, + background_color: Color::BLACK.into(), + ..Default::default() + }) + .id(); + + for linebreak_behavior in [BreakLineOn::AnyCharacter, BreakLineOn::WordBoundary] { + let row_id = commands + .spawn(NodeBundle { + style: Style { + flex_direction: FlexDirection::Row, + justify_content: JustifyContent::SpaceAround, + align_items: AlignItems::Center, + size: Size::new(Val::Percent(100.), Val::Percent(50.)), + ..Default::default() + }, + ..Default::default() + }) + .id(); + + let justifications = vec![ + JustifyContent::Center, + JustifyContent::FlexStart, + JustifyContent::FlexEnd, + JustifyContent::SpaceAround, + JustifyContent::SpaceBetween, + JustifyContent::SpaceEvenly, + ]; + + for (i, justification) in justifications.into_iter().enumerate() { + let c = 0.3 + i as f32 * 0.1; + let column_id = commands + .spawn(NodeBundle { + style: Style { + justify_content: justification, + flex_direction: FlexDirection::Column, + size: Size::new(Val::Percent(16.), Val::Percent(95.)), + overflow: Overflow::clip(), + ..Default::default() + }, + background_color: Color::rgb(0.5, c, 1.0 - c).into(), + ..Default::default() + }) + .id(); + + let messages = [ + format!("JustifyContent::{justification:?}"), + format!("LineBreakOn::{linebreak_behavior:?}"), + "Line 1\nLine 2\nLine 3".to_string(), + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas auctor, nunc ac faucibus fringilla.".to_string(), + ]; + + for (j, message) in messages.into_iter().enumerate() { + let text = Text { + sections: vec![TextSection { + value: message.clone(), + style: text_style.clone(), + }], + alignment: TextAlignment::Left, + linebreak_behavior, + }; + let text_id = commands + .spawn(( + TextBundle { + text, + ..Default::default() + }, + BackgroundColor(Color::rgb(0.8 - j as f32 * 0.2, 0., 0.)), + )) + .id(); + commands.entity(column_id).add_child(text_id); + } + commands.entity(row_id).add_child(column_id); + } + commands.entity(root).add_child(row_id); + } +}