Add a widgets module and a default theme

examples/widget-gallery/src/buttons.rs

@@ -1,36 +1,22 @@
-use floem::{
-    peniko::Color,
-    style::CursorStyle,
-    view::View,
-    views::{label, Decorators},
-};
+use floem::{peniko::Color, style::CursorStyle, view::View, views::Decorators, widgets::button};
 
 use crate::form::{form, form_item};
 
 pub fn button_view() -> impl View {
     form({
         (
             form_item("Basic Button:".to_string(), 120.0, || {
-                label(|| "Click me")
-                    .on_click(|_| {
-                        println!("Button clicked");
-                        true
-                    })
-                    .keyboard_navigatable()
-                    .style(|s| {
-                        s.border(1.0)
-                            .border_radius(10.0)
-                            .padding(10.0)
-                            .focus_visible(|s| s.border(2.).border_color(Color::BLUE))
-                    })
+                button(|| "Click me").on_click(|_| {
+                    println!("Button clicked");
+                    true
+                })
             }),
             form_item("Styled Button:".to_string(), 120.0, || {
-                label(|| "Click me")
+                button(|| "Click me")
                     .on_click(|_| {
                         println!("Button clicked");
                         true
                     })
-                    .keyboard_navigatable()
                     .style(|s| {
                         s.border(1.0)
                             .border_radius(10.0)
@@ -44,36 +30,17 @@ pub fn button_view() -> impl View {
                             .focus_visible(|s| s.border(2.).border_color(Color::BLUE))
                     })
             }),
-            form_item("Distabled Button:".to_string(), 120.0, || {
-                label(|| "Click me")
-                    .disabled(|| true)
-                    .on_click(|_| {
-                        println!("Button clicked");
-                        true
-                    })
-                    .keyboard_navigatable()
-                    .style(|s| {
-                        s.border(1.0)
-                            .border_radius(10.0)
-                            .padding(10.0)
-                            .color(Color::GRAY)
-                            .focus_visible(|s| s.border(2.).border_color(Color::BLUE))
-                            .hover(|s| s.background(Color::rgb8(224, 224, 224)))
-                    })
+            form_item("Disabled Button:".to_string(), 120.0, || {
+                button(|| "Click me").disabled(|| true).on_click(|_| {
+                    println!("Button clicked");
+                    true
+                })
             }),
             form_item("Secondary click button:".to_string(), 120.0, || {
-                label(|| "Right click me")
-                    .on_secondary_click(|_| {
-                        println!("Secondary mouse button click.");
-                        true
-                    })
-                    .keyboard_navigatable()
-                    .style(|s| {
-                        s.border(1.0)
-                            .border_radius(10.0)
-                            .padding(10.0)
-                            .focus_visible(|s| s.border(2.).border_color(Color::BLUE))
-                    })
+                button(|| "Right click me").on_secondary_click(|_| {
+                    println!("Secondary mouse button click.");
+                    true
+                })
             }),
         )
     })

examples/widget-gallery/src/checkbox.rs

@@ -1,56 +1,52 @@
 use floem::{
-    peniko::Color,
     reactive::create_signal,
     view::View,
-    views::{checkbox, label, stack, Decorators},
+    views::Decorators,
+    widgets::{checkbox, labeled_checkbox},
 };
 
 use crate::form::{form, form_item};
 
 pub fn checkbox_view() -> impl View {
+    let width = 160.0;
     let (is_checked, set_is_checked) = create_signal(true);
     form({
         (
-            form_item("Basic Checkbox:".to_string(), 120.0, move || {
+            form_item("Checkbox:".to_string(), width, move || {
                 checkbox(is_checked)
-                    .style(|s| s.focus_visible(|s| s.border(2.).border_color(Color::BLUE)))
+                    .style(|s| s.margin(5.0))
                     .on_click(move |_| {
                         set_is_checked.update(|checked| *checked = !*checked);
                         true
                     })
             }),
-            form_item("Labelled Checkbox:".to_string(), 120.0, move || {
-                stack({
-                    (
-                        checkbox(is_checked)
-                            .on_click(move |_| {
-                                set_is_checked.update(|checked| *checked = !*checked);
-                                true
-                            })
-                            .style(|s| s.focus_visible(|s| s.border(2.).border_color(Color::BLUE))),
-                        label(|| "Check me!"),
-                    )
-                })
-                .on_click(move |_| {
-                    set_is_checked.update(|checked| *checked = !*checked);
-                    true
-                })
+            form_item("Disabled Checkbox:".to_string(), width, move || {
+                checkbox(is_checked)
+                    .style(|s| s.margin(5.0))
+                    .on_click(move |_| {
+                        set_is_checked.update(|checked| *checked = !*checked);
+                        true
+                    })
+                    .disabled(|| true)
             }),
-            form_item("Disabled Checkbox:".to_string(), 120.0, move || {
-                stack({
-                    (
-                        checkbox(is_checked)
-                            .disabled(|| true)
-                            .style(|s| s.focus_visible(|s| s.border(2.).border_color(Color::BLUE))),
-                        label(|| "Check me!"),
-                    )
-                })
-                .style(|s| s.color(Color::GRAY))
-                .on_click(move |_| {
+            form_item("Labelled Checkbox:".to_string(), width, move || {
+                labeled_checkbox(is_checked, || "Check me!").on_click(move |_| {
                     set_is_checked.update(|checked| *checked = !*checked);
                     true
                 })
             }),
+            form_item(
+                "Disabled Labelled Checkbox:".to_string(),
+                width,
+                move || {
+                    labeled_checkbox(is_checked, || "Check me!")
+                        .on_click(move |_| {
+                            set_is_checked.update(|checked| *checked = !*checked);
+                            true
+                        })
+                        .disabled(|| true)
+                },
+            ),
         )
     })
 }

examples/widget-gallery/src/form.rs

@@ -27,7 +27,7 @@ pub fn form_item<V: View + 'static>(
                 .style(move |s| s.width(label_width).justify_end().margin_right(10.0)),
             view_fn(),
         ))
-        .style(|s| s.flex_row().items_start()),
+        .style(|s| s.flex_row().items_center()),
     )
     .style(|s| {
         s.flex_row()

examples/widget-gallery/src/images.rs

@@ -1,7 +1,7 @@
 use floem::{
     unit::UnitExt,
     view::View,
-    views::{img, scroll, Decorators},
+    views::{img, Decorators},
 };
 
 use crate::form::{form, form_item};
@@ -10,7 +10,7 @@ pub fn img_view() -> impl View {
     let ferris = include_bytes!("./../assets/ferris.png");
     let sunflower = include_bytes!("./../assets/sunflower.jpg");
 
-    scroll(form({
+    form({
         (
             form_item("PNG:".to_string(), 120.0, move || {
                 img(move || ferris.to_vec())
@@ -32,6 +32,5 @@ pub fn img_view() -> impl View {
             //     .object_fit(ObjectFit::Contain).object_position(VertPosition::Top, HorizPosition::Left))
             //
         )
-    }))
-    .style(|s| s.flex_col().min_width(1000.px()))
+    })
 }

examples/widget-gallery/src/lists.rs

@@ -8,9 +8,10 @@ use floem::{
     unit::UnitExt,
     view::View,
     views::{
-        checkbox, container, label, scroll, stack, virtual_list, Decorators, VirtualListDirection,
+        container, label, scroll, stack, virtual_list, Decorators, VirtualListDirection,
         VirtualListItemSize,
     },
+    widgets::checkbox,
 };
 
 use crate::form::{form, form_item};