list: improve docs

Signed-off-by: Dietmar Maurer <dietmar@proxmox.com>

diff --git a/src/lib.rs b/src/lib.rs
index d9f9cb013408eb204563e88b970903b3da30b62c..38767f1343658161c12554921e5a5e7a2185c620 100644 (file)
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -1,12 +1,13 @@
 //! # Proxmox Widget Toolkit (for Yew)
 //!
 //! This toolkit provides Yew components to build Single Page
-//! Apps. It provides evertything you need to build complex user
+//! Apps. It provides everything you need to build complex user
 //! interfaces:
 //!
 //! - Basic layout widgets like [Row](widget::Row) and [Column](widget::Column) (using css flexbox).
 //! - Standard widgets like buttons, menus, toolbars, tooltips, tab panels,
 //! - Data table with virtual scroll, sorting, nested resizable headers, tree support ...
+//! - List widget with virtual scroll support.
 //! - Helpers to build complex forms easily ([widget::form])
 //! - Modal dialogs
 //! - Split pane with a draggable sparator.
@@ -161,6 +162,11 @@
 //! the most complex widget. It is able to display tables and trees, and
 //! has virtual scroll support.
 
+//! ### Lists
+//!
+//! The [List](widget::List) widget also supports virtual scrolling, and allows
+//! using a html grid column layout.
+
 //! ### Drawing Canvas
 //!
 //! The [Canvas](widget::canvas) component utilizes the Html `<svg>` element to

diff --git a/src/widget/list.rs b/src/widget/list.rs
index 42893eb57d1c5140862d1f51fdf208d15774b7a0..4a65b11493affbb81606eee8d9d88f950b9f01a4 100644 (file)
--- a/src/widget/list.rs
+++ b/src/widget/list.rs
@@ -46,6 +46,25 @@ pub struct List {
     #[prop_or_default]
     pub key: Option<Key>,
 
+    /// The list uses a html grid layout, and you can set the 'grid-template-columns' property.
+    ///
+    /// This is a convenient way to use a column layout.
+    ///
+    ///  ```
+    /// # use pwt::prelude::*;
+    /// # use pwt::widget::{List, ListTile};
+    /// # fn create_list_tile() -> List {
+    ///     List::new(100, |pos| {
+    ///         ListTile::new()
+    ///             .with_child(html!{<span>{format!("{pos}")}</span>})
+    ///             .with_child(html!{<span>{"A simple list tile"}</span>})
+    ///     })
+    ///     // Use a two column layout.
+    ///     .grid_template_columns("auto 1fr")
+    /// # }
+    /// ```
+    ///
+    /// see: <https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns>
     #[prop_or(AttrValue::Static("1fr"))]
     #[builder(IntoPropValue, into_prop_value)]
     pub grid_template_columns: AttrValue,
@@ -149,6 +168,7 @@ impl SizeAccumulator {
     }
 }
 
+#[doc(hidden)]
 pub struct PwtList {
     viewport_height: f64,
     viewport_width: f64,