dan/gpui-component
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

description_list: Renamed child to item, and add child to add DescriptionItem. (#1521)

Browse source 
## Break Change

- The original `child` method has been renamed to `item`.
- Now the add new `child` to accept a `DescriptionItem` type like the
`children` method.
This commit is contained in:
Jason Lee 2025-11-05 15:26:17 +08:00 committed by GitHub
parent 2093046942
commit aea8223637
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 28 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
crates/ui/src/description_list.rs
View file

@ -16,7 +16,7 @@ pub struct DescriptionList {
columns: usize, columns: usize,
} }
/// Description item. /// Item for the [`DescriptionList`].
pub enum DescriptionItem { pub enum DescriptionItem {
Item { Item {
label: DescriptionText, label: DescriptionText,
@ -26,6 +26,7 @@ pub enum DescriptionItem {
Divider, Divider,
} }
/// Text for the label or value in the [`DescriptionList`].
#[derive(IntoElement)] #[derive(IntoElement)]
pub enum DescriptionText { pub enum DescriptionText {
String(SharedString), String(SharedString),
@ -174,7 +175,7 @@ impl DescriptionList {
} }
/// Add a [`DescriptionItem::Item`] to the list. /// Add a [`DescriptionItem::Item`] to the list.
pub fn child( pub fn item(
mut self, mut self,
label: impl Into<DescriptionText>, label: impl Into<DescriptionText>,
value: impl Into<DescriptionText>, value: impl Into<DescriptionText>,
@ -188,6 +189,12 @@ impl DescriptionList {
self self
} }
/// Add a child to the list.
pub fn child(mut self, child: impl Into<DescriptionItem>) -> Self {
self.items.push(child.into());
self
}
/// Add children to the list. /// Add children to the list.
pub fn children( pub fn children(
mut self, mut self,

6
crates/ui/src/inspector.rs
View file

@ -410,9 +410,9 @@ impl Render for DivInspector {
.columns(1) .columns(1)
.label_width(px(110.)) .label_width(px(110.))
.bordered(false) .bordered(false)
.child("Origin", format!("{}", state.bounds.origin), 1) .item("Origin", format!("{}", state.bounds.origin), 1)
.child("Size", format!("{}", state.bounds.size), 1) .item("Size", format!("{}", state.bounds.size), 1)
.child("Content Size", format!("{}", state.content_size), 1), .item("Content Size", format!("{}", state.content_size), 1),
) )
.child( .child(
v_flex() v_flex()

70
docs/docs/components/description-list.md
View file

@ -40,13 +40,13 @@ DescriptionList::new()
```rust ```rust
// Horizontal layout (default) // Horizontal layout (default)
DescriptionList::horizontal() DescriptionList::horizontal()
.child("Platform", "macOS, Windows, Linux", 1) .item("Platform", "macOS, Windows, Linux", 1)
.child("Repository", "https://github.com/longbridge/gpui-component", 1) .item("Repository", "https://github.com/longbridge/gpui-component", 1)
// Vertical layout // Vertical layout
DescriptionList::vertical() DescriptionList::vertical()
.child("Name", "GPUI Component", 1) .item("Name", "GPUI Component", 1)
.child("Description", "A comprehensive UI component library", 1) .item("Description", "A comprehensive UI component library", 1)
``` ```
### Multiple Columns with Spans ### Multiple Columns with Spans
@ -54,8 +54,8 @@ DescriptionList::vertical()
```rust ```rust
DescriptionList::new() DescriptionList::new()
.columns(3) .columns(3)
.child(DescriptionItem::new("Name").value("GPUI Component").span(1))
.children([ .children([
DescriptionItem::new("Name").value("GPUI Component").span(1),
DescriptionItem::new("Version").value("0.1.0").span(1), DescriptionItem::new("Version").value("0.1.0").span(1),
DescriptionItem::new("License").value("Apache-2.0").span(1), DescriptionItem::new("License").value("Apache-2.0").span(1),
DescriptionItem::new("Description") DescriptionItem::new("Description")
@ -71,11 +71,11 @@ DescriptionList::new()
```rust ```rust
DescriptionList::new() DescriptionList::new()
.child("Name", "GPUI Component", 1) .item("Name", "GPUI Component", 1)
.child("Version", "0.1.0", 1) .item("Version", "0.1.0", 1)
.divider() // Add a visual separator .divider() // Add a visual separator
.child("Author", "Longbridge", 1) .item("Author", "Longbridge", 1)
.child("License", "Apache-2.0", 1) .item("License", "Apache-2.0", 1)
``` ```
### Different Sizes ### Different Sizes
@ -84,16 +84,16 @@ DescriptionList::new()
// Large size // Large size
DescriptionList::new() DescriptionList::new()
.large() .large()
.child("Title", "Large Description List", 1) .item("Title", "Large Description List", 1)
// Medium size (default) // Medium size (default)
DescriptionList::new() DescriptionList::new()
.child("Title", "Medium Description List", 1) .item("Title", "Medium Description List", 1)
// Small size // Small size
DescriptionList::new() DescriptionList::new()
.small() .small()
.child("Title", "Small Description List", 1) .item("Title", "Small Description List", 1)
``` ```
### Without Borders ### Without Borders
@ -101,8 +101,8 @@ DescriptionList::new()
```rust ```rust
DescriptionList::new() DescriptionList::new()
.bordered(false) // Remove borders for a cleaner look .bordered(false) // Remove borders for a cleaner look
.child("Name", "GPUI Component", 1) .item("Name", "GPUI Component", 1)
.child("Type", "UI Library", 1) .item("Type", "UI Library", 1)
``` ```
### Custom Label Width (Horizontal Layout) ### Custom Label Width (Horizontal Layout)
@ -112,8 +112,8 @@ use gpui::px;
DescriptionList::horizontal() DescriptionList::horizontal()
.label_width(px(200.0)) // Set custom label width .label_width(px(200.0)) // Set custom label width
.child("Very Long Label Name", "Short Value", 1) .item("Very Long Label Name", "Short Value", 1)
.child("Short", "Very long value that needs more space", 1) .item("Short", "Very long value that needs more space", 1)
``` ```
### Rich Content with Custom Elements ### 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 ## Examples
### User Profile Information ### User Profile Information