diff --git a/examples/taffy.rs b/examples/taffy.rs index f7333b4b3..9b7f1b98d 100644 --- a/examples/taffy.rs +++ b/examples/taffy.rs @@ -1,7 +1,8 @@ -use xilem::view::{button, flex_column, flex_row}; +use vello::peniko::Color; +use xilem::view::{button, div, flex_column, flex_row}; use xilem::{view::View, App, AppLauncher}; -use taffy::style::{AlignItems, AlignSelf}; +use taffy::style::{AlignItems, JustifyContent}; use taffy::style_helpers::length; fn app_logic(data: &mut i32) -> impl View { @@ -28,13 +29,25 @@ fn app_logic(data: &mut i32) -> impl View { *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() {