Add text paragraph to grid example to demo/test text layout

bevyengine · Apr 17, 2023 · 267e2d4 · 267e2d4
1 parent 62a8e4b
commit 267e2d4
Showing 1 changed file with 17 additions and 3 deletions.
diff --git a/examples/ui/grid.rs b/examples/ui/grid.rs
@@ -124,8 +124,13 @@ fn spawn_layout(mut commands: Commands, asset_server: Res<AssetServer>) {
                         align_items: AlignItems::Start,
                         // Align content towards the center in the horizontal axis
                         justify_items: JustifyItems::Center,
-                        // Add 20px padding to the top
-                        padding: UiRect::top(Val::Px(20.)),
+                        // Add 10px padding
+                        padding: UiRect::all(Val::Px(10.)),
+                        // Add an fr track to take up all the available space at the bottom of the column so that the text nodes
+                        // can be top-aligned. Normally you'd use flexbox for this, but this is the CSS Grid example so we're using grid.
+                        grid_template_rows: vec![GridTrack::auto(), GridTrack::auto(), GridTrack::fr(1.0)],
+                        // Add a 10px gap between rows
+                        gap: Size::height(Val::Px(10.)),
                         ..default()
                     },
                     background_color: BackgroundColor(Color::BLACK),
@@ -135,11 +140,20 @@ fn spawn_layout(mut commands: Commands, asset_server: Res<AssetServer>) {
                     builder.spawn(TextBundle::from_section(
                         "Sidebar",
                         TextStyle {
-                            font,
+                            font: font.clone(),
                             font_size: 24.0,
                             color: Color::WHITE,
                         },
                     ));
+                    builder.spawn(TextBundle::from_section(
+                        "A paragraph of text which ought to wrap nicely. A paragraph of text which ought to wrap nicely. A paragraph of text which ought to wrap nicely. A paragraph of text which ought to wrap nicely. A paragraph of text which ought to wrap nicely. A paragraph of text which ought to wrap nicely. A paragraph of text which ought to wrap nicely.",
+                        TextStyle {
+                            font: font.clone(),
+                            font_size: 16.0,
+                            color: Color::WHITE,
+                        },
+                    ));
+                    builder.spawn(NodeBundle::default());
                 });
 
             // Footer / status bar