From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: Received: from firstgate.proxmox.com (firstgate.proxmox.com [IPv6:2a01:7e0:0:424::9]) by lore.proxmox.com (Postfix) with ESMTPS id 51A261FF1F5 for ; Fri, 29 Aug 2025 15:46:18 +0200 (CEST) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id D920E2F696; Fri, 29 Aug 2025 15:46:28 +0200 (CEST) From: Dominik Csapak To: yew-devel@lists.proxmox.com Date: Fri, 29 Aug 2025 15:46:17 +0200 Message-ID: <20250829134625.2653743-1-d.csapak@proxmox.com> X-Mailer: git-send-email 2.47.2 MIME-Version: 1.0 X-SPAM-LEVEL: Spam detection results: 0 AWL 0.022 Adjusted score from AWL reputation of From: address BAYES_00 -1.9 Bayes spam probability is 0 to 1% DMARC_MISSING 0.1 Missing DMARC policy KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment SPF_HELO_NONE 0.001 SPF: HELO does not publish an SPF Record SPF_PASS -0.001 SPF: sender matches SPF record Subject: [yew-devel] [PATCH yew-widget-toolkit 1/2] widget: list: expose `row-gap` and 'column-gap' property for grid layout X-BeenThere: yew-devel@lists.proxmox.com X-Mailman-Version: 2.1.29 Precedence: list List-Id: Yew framework devel list at Proxmox List-Unsubscribe: , List-Archive: List-Post: List-Help: List-Subscribe: , Reply-To: Yew framework devel list at Proxmox Content-Type: text/plain; charset="us-ascii" Content-Transfer-Encoding: 7bit Errors-To: yew-devel-bounces@lists.proxmox.com Sender: "yew-devel" this is useful to format the grid with gaps between columns and rows. Signed-off-by: Dominik Csapak --- src/widget/list/mod.rs | 60 +++++++++++++++++++++++++++++++++++++++++- 1 file changed, 59 insertions(+), 1 deletion(-) diff --git a/src/widget/list/mod.rs b/src/widget/list/mod.rs index a5bce14..fe29314 100644 --- a/src/widget/list/mod.rs +++ b/src/widget/list/mod.rs @@ -3,7 +3,7 @@ use html::IntoPropValue; use crate::prelude::*; -use crate::props::{EventSubscriber, WidgetBuilder}; +use crate::props::{EventSubscriber, PwtSpace, WidgetBuilder}; use crate::widget::Container; @@ -74,6 +74,50 @@ pub struct List { #[builder(IntoPropValue, into_prop_value)] pub grid_template_columns: AttrValue, + /// The list uses a html grid layout, and you can set the 'column-gap' property. + /// + /// ``` + /// # use pwt::prelude::*; + /// # use pwt::widget::{List, ListTile}; + /// # fn create_list_tile() -> List { + /// List::new(100, |pos| { + /// ListTile::new() + /// .with_child(html!{{format!("{pos}")}}) + /// .with_child(html!{{"A simple list tile"}}) + /// }) + /// // Use a two column layout. + /// .grid_template_columns("auto 1fr") + /// .column_gap(1) + /// # } + /// ``` + /// + /// see: + #[prop_or(PwtSpace::None)] + #[builder(Into, into)] + pub column_gap: PwtSpace, + + /// The list uses a html grid layout, and you can set the 'row-gap' property. + /// + /// ``` + /// # use pwt::prelude::*; + /// # use pwt::widget::{List, ListTile}; + /// # fn create_list_tile() -> List { + /// List::new(100, |pos| { + /// ListTile::new() + /// .with_child(html!{{format!("{pos}")}}) + /// .with_child(html!{{"A simple list tile"}}) + /// }) + /// // Use a two column layout. + /// .grid_template_columns("auto 1fr") + /// .row_gap(1) + /// # } + /// ``` + /// + /// see: + #[prop_or(PwtSpace::None)] + #[builder(Into, into)] + pub row_gap: PwtSpace, + /// Virtual Scroll /// /// Virtual scroll is enabled by default for lists with more than 30 rows. @@ -270,6 +314,20 @@ impl PwtList { .attribute("data-list-offset", self.scroll_info.offset.to_string()) .style("display", "grid") .style("grid-template-columns", &props.grid_template_columns) + .style( + "column-gap", + match props.column_gap { + PwtSpace::None => None, + other => Some(AttrValue::from(other)), + }, + ) + .style( + "row-gap", + match props.row_gap { + PwtSpace::None => None, + other => Some(AttrValue::from(other)), + }, + ) .style("--pwt-list-tile-min-height", min_height) .style("position", "relative") .style("top", format!("{}px", self.scroll_info.offset)); -- 2.47.2 _______________________________________________ yew-devel mailing list yew-devel@lists.proxmox.com https://lists.proxmox.com/cgi-bin/mailman/listinfo/yew-devel