* [PATCH yew-widget-toolkit 1/2] touch: slidable: properly use builder methods for style/css
@ 2026-06-09 13:37 Dominik Csapak
2026-06-09 13:37 ` [PATCH yew-widget-toolkit 2/2] touch: slidable: improve action interface Dominik Csapak
2026-06-09 16:50 ` applied: [PATCH yew-widget-toolkit 1/2] touch: slidable: properly use builder methods for style/css Thomas Lamprecht
0 siblings, 2 replies; 3+ messages in thread
From: Dominik Csapak @ 2026-06-09 13:37 UTC (permalink / raw)
To: yew-devel
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
^ permalink raw reply related [flat|nested] 3+ messages in thread* [PATCH yew-widget-toolkit 2/2] touch: slidable: improve action interface
2026-06-09 13:37 [PATCH yew-widget-toolkit 1/2] touch: slidable: properly use builder methods for style/css Dominik Csapak
@ 2026-06-09 13:37 ` Dominik Csapak
2026-06-09 16:50 ` applied: [PATCH yew-widget-toolkit 1/2] touch: slidable: properly use builder methods for style/css Thomas Lamprecht
1 sibling, 0 replies; 3+ messages in thread
From: Dominik Csapak @ 2026-06-09 13:37 UTC (permalink / raw)
To: yew-devel
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
^ permalink raw reply related [flat|nested] 3+ messages in thread* applied: [PATCH yew-widget-toolkit 1/2] touch: slidable: properly use builder methods for style/css
2026-06-09 13:37 [PATCH yew-widget-toolkit 1/2] touch: slidable: properly use builder methods for style/css Dominik Csapak
2026-06-09 13:37 ` [PATCH yew-widget-toolkit 2/2] touch: slidable: improve action interface Dominik Csapak
@ 2026-06-09 16:50 ` Thomas Lamprecht
1 sibling, 0 replies; 3+ messages in thread
From: Thomas Lamprecht @ 2026-06-09 16:50 UTC (permalink / raw)
To: yew-devel, Dominik Csapak
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
^ permalink raw reply [flat|nested] 3+ messages in thread
end of thread, other threads:[~2026-06-09 16:51 UTC | newest]
Thread overview: 3+ messages (download: mbox.gz follow: Atom feed
-- links below jump to the message on this page --
2026-06-09 13:37 [PATCH yew-widget-toolkit 1/2] touch: slidable: properly use builder methods for style/css Dominik Csapak
2026-06-09 13:37 ` [PATCH yew-widget-toolkit 2/2] touch: slidable: improve action interface Dominik Csapak
2026-06-09 16:50 ` applied: [PATCH yew-widget-toolkit 1/2] touch: slidable: properly use builder methods for style/css Thomas Lamprecht
This is an external index of several public inboxes,
see mirroring instructions on how to clone and mirror
all data and code used by this external index.