description_list: Renamed child to item, and add child to add DescriptionItem. (#1521)
## 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
GitHub
parent
2093046942
commit
aea8223637
3 changed files with 28 additions and 59 deletions
|
|
@ -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<DescriptionText>,
|
||||
value: impl Into<DescriptionText>,
|
||||
|
|
@ -188,6 +189,12 @@ impl DescriptionList {
|
|||
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.
|
||||
pub fn children(
|
||||
mut self,
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in a new issue