[PATCH yew-widget-toolkit 1/2] touch: slidable: properly use builder methods for style/css

[PATCH yew-widget-toolkit 1/2] touch: slidable: properly use builder methods for style/css

[Dominik Csapak]

instead of constructing one big 'style' attribute, use the proper
builder methods, such as '.class()', '.width()', and so on.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 src/touch/slidable/mod.rs | 71 ++++++++++++++++++---------------------
 1 file changed, 32 insertions(+), 39 deletions(-)

diff --git a/src/touch/slidable/mod.rs b/src/touch/slidable/mod.rs
index ae45e29..0b0a513 100644
--- a/src/touch/slidable/mod.rs
+++ b/src/touch/slidable/mod.rs
@@ -12,6 +12,7 @@ use yew::html::{IntoEventCallback, IntoPropValue};
 use yew::prelude::*;
 use yew::virtual_dom::VNode;
 
+use crate::css;
 use crate::dom::DomSizeObserver;
 use crate::prelude::*;
 use crate::props::CssLength;
@@ -362,7 +363,7 @@ impl Component for PwtSlidable {
 
         // no animation during drag
         let transition = if self.drag_pos.is_none() {
-            "transition: width 0.1s ease-out;"
+            "width 0.1s ease-out"
         } else {
             ""
         };
@@ -370,10 +371,10 @@ impl Component for PwtSlidable {
         let upper = GestureDetector::new(
             Container::new()
                 .class("pwt-slidable-slider")
-                .attribute(
-                    "style",
-                    "touch-action:none;width:100%;flex:0 0 auto;overflow:hidden;",
-                )
+                .class(css::Overflow::Hidden)
+                .flex(0.0)
+                .width(CssLength::Fraction(1.0))
+                .style("touch-action", "none")
                 .with_child(props.content.clone())
                 .into_html_with_ref(self.content_ref.clone()),
         )
@@ -382,47 +383,39 @@ impl Component for PwtSlidable {
         .on_swipe(ctx.link().callback(Msg::Swipe));
 
         let left_container = Container::new()
-            .attribute(
-                "style",
-                format!(
-                    "width:{left}px;flex: 0 0 auto;{};overflow:hidden;",
-                    transition
-                ),
-            )
+            .width(CssLength::Px(left))
+            .flex(0.0)
+            .class(css::Overflow::Hidden)
+            .style("transition", transition)
             .with_child(self.left_container(ctx));
 
         let right_container = Container::new()
-            .attribute(
-                "style",
-                format!(
-                    "width:{right}px;flex: 0 0 auto;{};overflow:hidden;",
-                    transition
-                ),
-            )
+            .width(CssLength::Px(right))
+            .flex(0.0)
+            .class(css::Overflow::Hidden)
+            .style("transition", transition)
             .with_child(self.right_container(ctx));
 
         let row = Row::new()
-            .attribute(
-                "style",
-                format!(
-                    "width:{};overflow:hidden;justify-content:{};transition:height 0.2s ease-out;{}",
-                    if self.start_pos == 0f64 && self.drag_pos.is_none() && !self.switch_back {
-                        String::from("100%")
-                    } else {
-                        format!("{}px", self.content_width)
-                    },
-                    if self.last_action_left {
-                        "left"
-                    } else {
-                        "right"
-                    },
-                    match self.view_state {
-                        ViewState::Normal => String::new(),
-                        ViewState::DismissStart => format!("height:{}px;", self.content_height),
-                        ViewState::DismissTransition | ViewState::Dismissed => String::from("height:0px;"),
-                    }
-                ),
+            .width(
+                if self.start_pos == 0f64 && self.drag_pos.is_none() && !self.switch_back {
+                    CssLength::Fraction(1.0)
+                } else {
+                    CssLength::Px(self.content_width)
+                },
             )
+            .class(css::Overflow::Hidden)
+            .class(if self.last_action_left {
+                css::JustifyContent::Left
+            } else {
+                css::JustifyContent::Right
+            })
+            .style("transition", "height 0.2s ease-out")
+            .height(match self.view_state {
+                ViewState::Normal => CssLength::None,
+                ViewState::DismissStart => CssLength::Px(self.content_height),
+                ViewState::DismissTransition | ViewState::Dismissed => CssLength::Px(0.0),
+            })
             .with_child(left_container)
             .with_child(upper)
             .with_child(right_container)
-- 
2.47.3

[PATCH yew-widget-toolkit 2/2] touch: slidable: improve action interface

[Dominik Csapak]

usually when a widget has the capability to add children, a `with_child`
and `add_child` is provided. Do that here too for the left and right
actions.

This way a user does not have to wrap their actions in a row manually,
but can simply call 'with_left_action' multiple times.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 src/touch/slidable/mod.rs | 62 ++++++++++++++++++++++++++++++++++-----
 1 file changed, 54 insertions(+), 8 deletions(-)

diff --git a/src/touch/slidable/mod.rs b/src/touch/slidable/mod.rs
index 0b0a513..b97a104 100644
--- a/src/touch/slidable/mod.rs
+++ b/src/touch/slidable/mod.rs
@@ -33,14 +33,24 @@ use pwt_macros::widget;
 pub struct Slidable {
     content: VNode,
 
-    /// Widget displayed on the left side (below the slider).
+    /// Widget displayed on the left side (below the slider). Takes precedence over
+    /// `left_action_list` and `with/add_left_action`.
     #[prop_or_default]
     pub left_actions: Option<VNode>,
 
-    /// Widget displayed on the right side (below the slider).
+    /// Widget displayed on the right side (below the slider). Takes precedence over
+    /// `right_action_list` and `with/add_right_action`.
     #[prop_or_default]
     pub right_actions: Option<VNode>,
 
+    #[prop_or_default]
+    /// A list of left hand side slidable actions.
+    pub left_action_list: Vec<SlidableAction>,
+
+    #[prop_or_default]
+    /// A list of right hand side slidable actions.
+    pub right_action_list: Vec<SlidableAction>,
+
     /// Dismiss callback.
     ///
     /// Without a callback, dismiss is disabled on slidables without actions.
@@ -100,6 +110,28 @@ impl Slidable {
     pub fn set_on_tap(&mut self, cb: impl IntoEventCallback<InputEvent>) {
         self.on_tap = cb.into_event_callback();
     }
+
+    /// Method to add a left hand side action
+    pub fn add_left_action(&mut self, action: impl Into<SlidableAction>) {
+        self.left_action_list.push(action.into());
+    }
+
+    /// Builder style method to add a left hand side action
+    pub fn with_left_action(mut self, action: impl Into<SlidableAction>) -> Self {
+        self.add_left_action(action);
+        self
+    }
+
+    /// Method to add a right hand side action
+    pub fn add_right_action(&mut self, action: impl Into<SlidableAction>) {
+        self.right_action_list.push(action.into());
+    }
+
+    /// Builder style method to add a right hand side action
+    pub fn with_right_action(mut self, action: impl Into<SlidableAction>) -> Self {
+        self.add_right_action(action);
+        self
+    }
 }
 
 #[derive(Copy, Clone, Debug, PartialEq)]
@@ -174,16 +206,23 @@ impl PwtSlidable {
 
     fn left_container(&self, ctx: &Context<Self>) -> Html {
         let props = ctx.props();
-        let actions = props.left_actions.clone();
+        let actions = match props.left_actions.clone() {
+            Some(actions) => vec![actions],
+            None => props
+                .left_action_list
+                .iter()
+                .map(|action| action.clone().into())
+                .collect(),
+        };
 
         Row::new()
             .class("pwt-w-100 pwt-h-100")
             .with_child(
-                Container::new()
+                Row::new()
                     .height(CssLength::Fraction(1.0))
                     .min_width(0)
                     .style("flex", "0 1 auto")
-                    .with_optional_child(actions)
+                    .children(actions)
                     .into_html_with_ref(self.left_action_ref.clone()),
             )
             .with_child(html! {<div style="flex: 1 1 auto;"></div>})
@@ -192,17 +231,24 @@ impl PwtSlidable {
 
     fn right_container(&self, ctx: &Context<Self>) -> Html {
         let props = ctx.props();
-        let actions = props.right_actions.clone();
+        let actions = match props.right_actions.clone() {
+            Some(action) => vec![action],
+            None => props
+                .right_action_list
+                .iter()
+                .map(|action| action.clone().into())
+                .collect(),
+        };
 
         Row::new()
             .class("pwt-w-100 pwt-h-100")
             .with_child(html! {<div style="flex: 1 1 auto;"></div>})
             .with_child(
-                Container::new()
+                Row::new()
                     .height(CssLength::Fraction(1.0))
                     .min_width(0)
                     .style("flex", "0 1 auto")
-                    .with_optional_child(actions)
+                    .children(actions)
                     .into_html_with_ref(self.right_action_ref.clone()),
             )
             .into_html_with_ref(self.right_ref.clone())
-- 
2.47.3

applied: [PATCH yew-widget-toolkit 1/2] touch: slidable: properly use builder methods for style/css

[Thomas Lamprecht]

On Tue, 09 Jun 2026 15:37:08 +0200, Dominik Csapak wrote:
> instead of constructing one big 'style' attribute, use the proper
> builder methods, such as '.class()', '.width()', and so on.

Applied, thanks!

[1/2] touch: slidable: properly use builder methods for style/css
      commit: 570c86147c704c5f5252b2ad12f6910e8ec0b96f
[2/2] touch: slidable: improve action interface
      commit: ae9c35e531d2739a6f8d1527500056b0b2dd1a95