Update taffy example to use background colours

linebender · Nov 2, 2023 · 538e841 · 538e841
1 parent 9623073
commit 538e841
Showing 1 changed file with 20 additions and 4 deletions.
diff --git a/examples/taffy.rs b/examples/taffy.rs
@@ -1,7 +1,8 @@
-use xilem::view::{button, flex_column, flex_row};
+use xilem::view::{button, flex_column, flex_row, div};
 use xilem::{view::View, App, AppLauncher};
+use vello::peniko::Color;
 
-use taffy::style::{AlignItems, AlignSelf};
+use taffy::style::{AlignItems, JustifyContent};
 use taffy::style_helpers::length;
 
 fn app_logic(data: &mut i32) -> impl View<i32> {
@@ -18,6 +19,7 @@ fn app_logic(data: &mut i32) -> impl View<i32> {
             println!("clicked");
             *data += 1;
         }),
+
         flex_row((
             button("decrease", |data| {
                 println!("clicked decrease");
@@ -28,13 +30,27 @@ fn app_logic(data: &mut i32) -> impl View<i32> {
                 *data = 0;
             }),
         ))
+        .with_background_color(Color::BLUE_VIOLET)
         .with_style(|s| {
+            s.gap.width = length(20.0);
             s.flex_grow = 1.0;
-            s.align_self = Some(AlignSelf::Center);
+            s.justify_content = Some(JustifyContent::Center);
             s.align_items = Some(AlignItems::Center);
         }),
+
+        div(())
+            .with_background_color(Color::RED)
+            .with_style(|s| s.flex_grow = 1.0),
+
     ))
-    .with_style(|s| s.gap.height = length(20.0))
+    .with_style(|s| {
+        s.gap.height = length(20.0);
+        s.padding.left = length(20.0);
+        s.padding.right = length(20.0);
+        s.padding.top = length(20.0);
+        s.padding.bottom = length(20.0);
+    })
+    .with_background_color(Color::WHITE)
 }
 
 fn main() {