diff --git a/crates/ui/src/description_list.rs b/crates/ui/src/description_list.rs index 429e8f30..5ddce5d2 100644 --- a/crates/ui/src/description_list.rs +++ b/crates/ui/src/description_list.rs @@ -16,7 +16,7 @@ pub struct DescriptionList { columns: usize, } -/// Description item. +/// Item for the [`DescriptionList`]. pub enum DescriptionItem { Item { label: DescriptionText, @@ -26,6 +26,7 @@ pub enum DescriptionItem { Divider, } +/// Text for the label or value in the [`DescriptionList`]. #[derive(IntoElement)] pub enum DescriptionText { String(SharedString), @@ -174,7 +175,7 @@ impl DescriptionList { } /// Add a [`DescriptionItem::Item`] to the list. - pub fn child( + pub fn item( mut self, label: impl Into, value: impl Into, @@ -188,6 +189,12 @@ impl DescriptionList { self } + /// Add a child to the list. + pub fn child(mut self, child: impl Into) -> Self { + self.items.push(child.into()); + self + } + /// Add children to the list. pub fn children( mut self, diff --git a/crates/ui/src/inspector.rs b/crates/ui/src/inspector.rs index 5caba46d..a3831872 100644 --- a/crates/ui/src/inspector.rs +++ b/crates/ui/src/inspector.rs @@ -410,9 +410,9 @@ impl Render for DivInspector { .columns(1) .label_width(px(110.)) .bordered(false) - .child("Origin", format!("{}", state.bounds.origin), 1) - .child("Size", format!("{}", state.bounds.size), 1) - .child("Content Size", format!("{}", state.content_size), 1), + .item("Origin", format!("{}", state.bounds.origin), 1) + .item("Size", format!("{}", state.bounds.size), 1) + .item("Content Size", format!("{}", state.content_size), 1), ) .child( v_flex() diff --git a/docs/docs/components/description-list.md b/docs/docs/components/description-list.md index 91691ea9..247a1cc2 100644 --- a/docs/docs/components/description-list.md +++ b/docs/docs/components/description-list.md @@ -40,13 +40,13 @@ DescriptionList::new() ```rust // Horizontal layout (default) DescriptionList::horizontal() - .child("Platform", "macOS, Windows, Linux", 1) - .child("Repository", "https://github.com/longbridge/gpui-component", 1) + .item("Platform", "macOS, Windows, Linux", 1) + .item("Repository", "https://github.com/longbridge/gpui-component", 1) // Vertical layout DescriptionList::vertical() - .child("Name", "GPUI Component", 1) - .child("Description", "A comprehensive UI component library", 1) + .item("Name", "GPUI Component", 1) + .item("Description", "A comprehensive UI component library", 1) ``` ### Multiple Columns with Spans @@ -54,8 +54,8 @@ DescriptionList::vertical() ```rust DescriptionList::new() .columns(3) + .child(DescriptionItem::new("Name").value("GPUI Component").span(1)) .children([ - DescriptionItem::new("Name").value("GPUI Component").span(1), DescriptionItem::new("Version").value("0.1.0").span(1), DescriptionItem::new("License").value("Apache-2.0").span(1), DescriptionItem::new("Description") @@ -71,11 +71,11 @@ DescriptionList::new() ```rust DescriptionList::new() - .child("Name", "GPUI Component", 1) - .child("Version", "0.1.0", 1) + .item("Name", "GPUI Component", 1) + .item("Version", "0.1.0", 1) .divider() // Add a visual separator - .child("Author", "Longbridge", 1) - .child("License", "Apache-2.0", 1) + .item("Author", "Longbridge", 1) + .item("License", "Apache-2.0", 1) ``` ### Different Sizes @@ -84,16 +84,16 @@ DescriptionList::new() // Large size DescriptionList::new() .large() - .child("Title", "Large Description List", 1) + .item("Title", "Large Description List", 1) // Medium size (default) DescriptionList::new() - .child("Title", "Medium Description List", 1) + .item("Title", "Medium Description List", 1) // Small size DescriptionList::new() .small() - .child("Title", "Small Description List", 1) + .item("Title", "Small Description List", 1) ``` ### Without Borders @@ -101,8 +101,8 @@ DescriptionList::new() ```rust DescriptionList::new() .bordered(false) // Remove borders for a cleaner look - .child("Name", "GPUI Component", 1) - .child("Type", "UI Library", 1) + .item("Name", "GPUI Component", 1) + .item("Type", "UI Library", 1) ``` ### Custom Label Width (Horizontal Layout) @@ -112,8 +112,8 @@ use gpui::px; DescriptionList::horizontal() .label_width(px(200.0)) // Set custom label width - .child("Very Long Label Name", "Short Value", 1) - .child("Short", "Very long value that needs more space", 1) + .item("Very Long Label Name", "Short Value", 1) + .item("Short", "Very long value that needs more space", 1) ``` ### Rich Content with Custom Elements @@ -163,44 +163,6 @@ DescriptionList::new() ]) ``` -## API Reference - -### DescriptionList - -| Method | Description | -| --------------------------- | --------------------------------------------------------- | -| `new()` | Create a new description list with horizontal layout | -| `horizontal()` | Create a horizontal description list (default) | -| `vertical()` | Create a vertical description list | -| `label_width(width)` | Set label width for horizontal layout (default: 120px) | -| `layout(axis)` | Set layout direction (Axis::Horizontal or Axis::Vertical) | -| `bordered(bool)` | Enable/disable borders (default: true, horizontal only) | -| `columns(count)` | Set number of columns (1-10, default: 3) | -| `child(label, value, span)` | Add a description item directly | -| `children(items)` | Add multiple description items | -| `divider()` | Add a visual divider | - -### DescriptionItem - -| Method | Description | -| ---------------- | ---------------------------------------- | -| `new(label)` | Create a new description item with label | -| `value(content)` | Set the value content | -| `span(count)` | Set column span (default: 1) | -| `Divider` | Create a divider item | - -### DescriptionText - -Supports multiple content types: - -| Type | Description | -| -------------- | --------------------- | -| `&str` | Plain text string | -| `String` | Owned string | -| `SharedString` | GPUI shared string | -| `Text` | Styled text component | -| `AnyElement` | Any GPUI element | - ## Examples ### User Profile Information