DescriptionList

A versatile component for displaying key-value pairs in a structured, organized layout. Supports both horizontal and vertical layouts, multiple columns, borders, and different sizes. Perfect for showing detailed information like metadata, specifications, or summary data.

Install

#Import

use gpui_kit::component::description_list::{DescriptionList, DescriptionItem, DescriptionText};

// Installed in ui/components. That directory is on the Slint include path, so import by file name:
import { DescriptionItem, DescriptionLayout, DescriptionList } from "description-list.slint";

use iced::widget::{column, container, mouse_area, row, scrollable, svg, text};
use iced::{Alignment, Element, Length, Task, Theme};

#Usage

#Basic Description List

DescriptionList::new()
    .item("Name", "uni-kit", 1)
    .item("Version", "0.1.0", 1)
    .item("License", "Apache-2.0", 1)

DescriptionList {
    bordered: true;
    items: [
        root.entry("Name", "GPUI Kit", 1),
        root.entry("Version", "0.1.0", 1),
        root.entry("License", "Apache-2.0", 1),
    ];
}

// One bordered list at the medium insets: the Slint example's first
// `GroupBox`.
let basic = body_box(DescriptionList::new([
    Item::new("Name", "GPUI Kit"),
    Item::new("Version", "0.1.0"),
    Item::new("License", "Apache-2.0"),
]));

#Using DescriptionItem Builder

DescriptionList::new()
    .children([
        DescriptionItem::new("Name").value("uni-kit"),
        DescriptionItem::new("Description").value("UI components for building desktop applications"),
        DescriptionItem::new("Version").value("0.1.0"),
    ])

SlintNo Slint version of this example yet.

#Different Layouts

// Horizontal layout (default)
DescriptionList::horizontal()
    .item("Platform", "macOS, Windows, Linux", 1)
    .item("Repository", "https://github.com/MohsenDastaran/uni-kit", 1)

// Vertical layout
DescriptionList::vertical()
    .item("Name", "uni-kit", 1)
    .item("Description", "A comprehensive Rust desktop framework", 1)

VerticalLayout {
    spacing: 16px;
    Text {
        text: "Horizontal";
        color: Theme.muted-foreground;
        font-size: Theme.font-size-xs;
        font-weight: 500;
    }
    DescriptionList {
        layout: DescriptionLayout.horizontal;
        bordered: true;
        items: [
            root.entry("Platform", "macOS, Windows, Linux", 1),
            root.entry("Repository", "https://github.com/longbridge/gpui-kit", 1),
        ];
    }
    Text {
        text: "Vertical";
        color: Theme.muted-foreground;
        font-size: Theme.font-size-xs;
        font-weight: 500;
    }
    DescriptionList {
        layout: DescriptionLayout.vertical;
        bordered: true;
        items: [
            root.entry("Name", "GPUI Kit", 1),
            root.entry("Description", "A comprehensive Rust desktop framework", 1),
        ];
    }
}

// Horizontal (the default) beside the stacked form, each under the caption
// the Slint example writes above it.
let layouts = body_box(
    column![
        caption("Horizontal"),
        DescriptionList::new([
            Item::new("Platform", "macOS, Windows, Linux"),
            Item::new("Repository", "https://github.com/longbridge/gpui-kit"),
        ]),
        caption("Vertical"),
        DescriptionList::new([
            Item::new("Name", "GPUI Kit"),
            Item::new("Description", "A comprehensive Rust desktop framework"),
        ])
        .layout(Layout::Vertical),
    ]
    .spacing(theme::SPACING_LG),
);

#Multiple Columns with Spans

DescriptionList::new()
    .columns(3)
    .child(DescriptionItem::new("Name").value("uni-kit").span(1))
    .children([
        DescriptionItem::new("Version").value("0.1.0").span(1),
        DescriptionItem::new("License").value("Apache-2.0").span(1),
        DescriptionItem::new("Description")
            .value("Full-featured UI components for desktop applications")
            .span(3), // Spans all 3 columns
        DescriptionItem::new("Repository")
            .value("https://github.com/MohsenDastaran/uni-kit")
            .span(2), // Spans 2 columns
    ])

DescriptionList {
    columns: 3;
    bordered: true;
    items: [
        root.entry("Name", "GPUI Kit", 1),
        root.entry("Version", "0.1.0", 1),
        root.entry("License", "Apache-2.0", 1),
        root.entry("Description", "Full-featured UI components for desktop applications", 3),
        root.entry("Repository", "https://github.com/longbridge/gpui-kit", 2),
        root.entry("Author", "Longbridge", 1),
    ];
}

// Three columns; the description spans all three and the repository two.
let spans = body_box(
    DescriptionList::new([
        Item::new("Name", "GPUI Kit"),
        Item::new("Version", "0.1.0"),
        Item::new("License", "Apache-2.0"),
        Item::new(
            "Description",
            "Full-featured UI components for desktop applications",
        )
        .span(3),
        Item::new("Repository", "https://github.com/longbridge/gpui-kit").span(2),
        Item::new("Author", "Longbridge"),
    ])
    .columns(3),
);

#With Separators

DescriptionList::new()
    .item("Name", "uni-kit", 1)
    .item("Version", "0.1.0", 1)
    .separator() // Add a visual separator
    .item("Author", "Longbridge", 1)
    .item("License", "Apache-2.0", 1)

DescriptionList {
    bordered: true;
    items: [
        root.entry("Name", "GPUI Kit", 1),
        root.entry("Version", "0.1.0", 1),
        root.rule(),
        root.entry("Author", "Longbridge", 1),
        root.entry("License", "Apache-2.0", 1),
    ];
}

// The separator band between the version and the author.
let separators = body_box(DescriptionList::new([
    Item::new("Name", "GPUI Kit"),
    Item::new("Version", "0.1.0"),
    Item::separator(),
    Item::new("Author", "Longbridge"),
    Item::new("License", "Apache-2.0"),
]));

#Different Sizes

// Large size
DescriptionList::new()
    .large()
    .item("Title", "Large Description List", 1)

// Medium size (default)
DescriptionList::new()
    .item("Title", "Medium Description List", 1)

// Small size
DescriptionList::new()
    .small()
    .item("Title", "Small Description List", 1)

VerticalLayout {
    spacing: 16px;
    DescriptionList {
        size: ControlSize.large;
        bordered: true;
        items: [
            root.entry("Title", "Large Description List", 1)
        ];
    }
    DescriptionList {
        bordered: true;
        items: [
            root.entry("Title", "Medium Description List", 1)
        ];
    }
    DescriptionList {
        size: ControlSize.small;
        bordered: true;
        items: [
            root.entry("Title", "Small Description List", 1)
        ];
    }
}

// The three named steps: large, medium and small.
let sizes = body_box(
    column![
        DescriptionList::new([Item::new("Title", "Large Description List")])
            .size(ControlSize::Large),
        DescriptionList::new([Item::new("Title", "Medium Description List")]),
        DescriptionList::new([Item::new("Title", "Small Description List")])
            .size(ControlSize::Small),
    ]
    .spacing(theme::SPACING_LG),
);

#Without Borders

DescriptionList::new()
    .bordered(false) // Remove borders for a cleaner look
    .item("Name", "uni-kit", 1)
    .item("Type", "UI Library", 1)

DescriptionList {
    bordered: false;
    items: [
        root.entry("Name", "GPUI Kit", 1),
        root.entry("Type", "UI Library", 1),
    ];
}

// `bordered(false)` drops the surface edge, the label fill and the row rules.
let borderless = body_box(
    DescriptionList::new([
        Item::new("Name", "GPUI Kit"),
        Item::new("Type", "UI Library"),
    ])
    .bordered(false),
);

#Custom Label Width (Horizontal Layout)

use gpui_kit::px;

DescriptionList::horizontal()
    .label_width(px(200.0)) // Set custom label width
    .item("Very Long Label Name", "Short Value", 1)
    .item("Short", "Very long value that needs more space", 1)

DescriptionList {
    label-width: 200px;
    bordered: true;
    items: [
        root.entry("Very Long Label Name", "Short Value", 1),
        root.entry("Short", "Very long value that needs more space", 1),
    ];
}

// A 200px label column, so the long term keeps one line and the short one
// gives its space to the detail.
let label_width = body_box(
    DescriptionList::new([
        Item::new("Very Long Label Name", "Short Value"),
        Item::new("Short", "Very long value that needs more space"),
    ])
    .label_width(200.0),
);

#Rich Content with Custom Elements

use gpui_kit::component::text::markdown;

DescriptionList::new()
    .columns(2)
    .children([
        DescriptionItem::new("Name").value("uni-kit"),
        DescriptionItem::new("Description").value(
            markdown(
                "UI components for building **fantastic** desktop applications.",
            ).into_any_element()
        ),
    ])