Start to add custom style methods for widgets (#377)

* Start to add custom style methods for widgets

* clippy

* Add method for applying regular styles in the custom style method

* don't make custom toggle button styles go through class

examples/timer/src/main.rs

@@ -3,7 +3,6 @@ use std::time::{Duration, Instant};
 use floem::{
     action::exec_after,
     reactive::{create_effect, create_rw_signal},
-    style::BorderRadius,
     unit::UnitExt,
     view::View,
     views::{container, label, stack, text, v_stack, Decorators},
@@ -71,21 +70,19 @@ fn app_view() -> impl View {
 
 /// A slider with a thin bar instead of the default thick bar.
 fn thin_slider(fill_percent: impl Fn() -> f32 + 'static) -> slider::Slider {
-    slider::slider(fill_percent).style(|s| {
-        s.width(200)
-            .class(slider::AccentBarClass, |s| s.height(30.pct()))
-            .class(slider::BarClass, |s| s.height(30.pct()))
-    })
+    slider::slider(fill_percent)
+        .slider_style(|s| s.accent_bar_height(30.pct()).bar_height(30.pct()))
+        .style(|s| s.width(200))
 }
 
 /// A non-interactive slider that has been repurposed into a progress bar.
 fn gauge(fill_percent: impl Fn() -> f32 + 'static) -> slider::Slider {
     slider::slider(fill_percent)
-        .disable_events(|| true)
-        .style(|s| {
-            s.width(200)
-                .set(slider::HandleRadius, 0.pct())
-                .class(slider::BarClass, |s| s.set(BorderRadius, 25.pct()))
-                .class(slider::AccentBarClass, |s| s.set(BorderRadius, 25.pct()))
+        .disabled(|| true)
+        .slider_style(|s| {
+            s.handle_radius(0)
+                .bar_radius(25.pct())
+                .accent_bar_radius(25.pct())
         })
+        .style(|s| s.width(200))
 }

examples/widget-gallery/src/buttons.rs

@@ -44,29 +44,19 @@ pub fn button_view() -> impl View {
                     println!("Secondary mouse button click.");
                 })
             }),
-            form_item("Toggle button - Switch:".to_string(), 120.0, || {
+            form_item("Toggle button - Snap:".to_string(), 120.0, || {
                 toggle_button(|| true)
                     .on_toggle(|_| {
                         println!("Button Toggled");
                     })
-                    .style(|s| {
-                        s.set(
-                            widgets::ToggleButtonBehavior,
-                            widgets::ToggleButtonSwitch::Switch,
-                        )
-                    })
+                    .toggle_style(|s| s.behavior(widgets::ToggleHandleBehavior::Snap))
             }),
             form_item("Toggle button - Follow:".to_string(), 120.0, || {
                 toggle_button(|| true)
                     .on_toggle(|_| {
                         println!("Button Toggled");
                     })
-                    .style(|s| {
-                        s.set(
-                            widgets::ToggleButtonBehavior,
-                            widgets::ToggleButtonSwitch::Follow,
-                        )
-                    })
+                    .toggle_style(|s| s.behavior(widgets::ToggleHandleBehavior::Follow))
             }),
         )
     })

examples/widget-gallery/src/slider.rs

@@ -1,7 +1,5 @@
 use floem::{
-    peniko::Color,
     reactive::{create_effect, create_rw_signal},
-    style::Foreground,
     unit::UnitExt,
     view::View,
     views::{label, stack, text_input, Decorators},
@@ -33,11 +31,11 @@ pub fn slider_view() -> impl View {
             form_item("Unaligned Slider:".to_string(), 120.0, move || {
                 stack((
                     slider::slider(move || set_slider.get())
-                        .style(|s| {
-                            s.width(200)
-                                .class(slider::AccentBarClass, |s| s.height(30.pct()))
-                                .class(slider::BarClass, |s| s.height(30.pct()))
-                                .set(slider::EdgeAlign, false)
+                        .slider_style(|s| {
+                            s.accent_bar_height(30.pct())
+                                .bar_height(30.pct())
+                                .edge_align(false)
+                                .style(|s| s.width(200))
                         })
                         .on_change_pct(move |val| set_slider.set(val)),
                     label(move || format!("{:.1}%", set_slider.get())),
@@ -47,8 +45,10 @@ pub fn slider_view() -> impl View {
             form_item("Progress bar:".to_string(), 120.0, move || {
                 stack((
                     slider::slider(move || set_slider.get())
-                        .style(|s| s.width(200).set(Foreground, Color::GREEN))
-                        .disable_events(|| true)
+                        .slider_style(|s| {
+                            s.handle_radius(0).edge_align(true).style(|s| s.width(200))
+                        })
+                        .disabled(|| true)
                         .on_change_pct(move |val| set_slider.set(val)),
                     label(move || format!("{:.1}%", set_slider.get())),
                 ))

src/views/decorator.rs

@@ -18,9 +18,9 @@ use crate::{
 
 /// A trait that extends the appearance and functionality of Views through styling and event handling.
 pub trait Decorators: View + Sized {
-    /// Alter the style of the view.  
+    /// Alter the style of the view.
     ///
-    /// Earlier applications of `style` have lower priority than later calls.  
+    /// Earlier applications of `style` have lower priority than later calls.
     /// ```rust
     /// # use floem::{peniko::Color, view::View, views::{Decorators, label, stack}};
     /// fn view() -> impl View {

src/widgets/dropdown.rs

@@ -318,6 +318,42 @@ impl<T> DropDown<T> {
             list
         }));
     }
+
+    /// Sets the custom style properties of the `DropDown`.
+    pub fn dropdown_style(
+        mut self,
+        style: impl Fn(DropDownCustomStyle) -> DropDownCustomStyle + 'static,
+    ) -> Self {
+        let id = self.id();
+        let offset = Widget::view_data_mut(&mut self).style.next_offset();
+        let style = create_updater(
+            move || style(DropDownCustomStyle(Style::new())),
+            move |style| id.update_style(style.0, offset),
+        );
+        Widget::view_data_mut(&mut self).style.push(style.0);
+        self
+    }
+}
+
+pub struct DropDownCustomStyle(Style);
+
+impl DropDownCustomStyle {
+    /// Sets the `CloseOnAccept` property for the dropdown, which determines whether the dropdown
+    /// should automatically close when an item is selected. The default value is `true`.
+    ///
+    /// # Arguments
+    /// * `close`: If set to `true`, the dropdown will close upon item selection. If `false`, it
+    /// will remain open after an item is selected.
+    pub fn close_on_accept(mut self, close: bool) -> Self {
+        self = Self(self.0.set(CloseOnAccept, close));
+        self
+    }
+
+    /// Apply regular style properties
+    pub fn style(mut self, style: impl Fn(Style) -> Style + 'static) -> Self {
+        self = Self(self.0.apply(style(Style::new())));
+        self
+    }
 }
 
 impl<T> Drop for DropDown<T> {