Component ListItem

ListItem

A row content container for list-style UIs.

ListItem provides standardized slots and a predictable row layout. It is not the virtualization boundary (use VirtualRow for that).

Example

use gpui::{div, px};
use yororen_ui::component::{icon, label, list_item, IconName};

let row = list_item()
    .leading(icon(IconName::Search).size(px(16.)))
    .content(label("Search").strong(true))
    .secondary(label("Find in files").muted(true))
    .trailing(div().child("⌘F"));

When to use

• Settings rows
• Search results
• File trees (often combined with Disclosure)

API

• list_item(): constructor
• id(...): stable identity override
• leading(el) / content(el) / secondary(el) / trailing(el): standard slots
• hoverable(bool): enable hover background (default: true)
• selected(bool): apply selected background
• hover_bg(Hsla) / selected_bg(Hsla): override background colors

Layout rules

• ListItem itself is full-width and uses a row layout with a content column.
• The content column is flex_grow() so trailing content stays right-aligned.

Defaults

• Minimum height: 32px
• Padding: px_3 + py_2
• Hover background: theme.surface.hover (when hoverable(true) and not selected)
• Selected background: theme.action.neutral.active_bg

See also:

• Design-Layout-Rules

Notes

• ListItem is not the virtualization boundary. Use VirtualRow for virtualization.