Lumeo

List

A vertical list of items with support for icons, meta text, leading/trailing content, and hover states — the building block for menus, contacts, settings, and feeds.

Installation

dotnet add package Lumeo

One-time app setup (AddLumeo(), CSS & JS) is covered in the installation guide.

Usage

@using Lumeo

<List />

  • Inbox

    12 unread messages

  • Sent

    View sent messages

  • Drafts

    3 unsaved drafts

  • Trash

    Empty trash

  • Notifications

    3

  • Messages

    12

  • Settings

Small

  • Item one

  • Item two

Default

  • Item one

  • Item two

Large

  • Item one

  • Item two

  • View profile

  • Account settings

  • Sign out

API Reference

List

Property Type Default Description
Bordered bool false Add outer border and dividers between items.
Hoverable bool false Show a subtle background highlight on hover.
Size ListSize Default Controls item padding: Sm, Default, or Lg.

ListItem

Property Type Default Description
Title string? — Primary text (bold, truncated).
Description string? — Secondary text below the title (muted, truncated).
Leading RenderFragment? — Content placed on the left (icon, avatar, checkbox).
Trailing RenderFragment? — Content placed on the right (badge, chevron, action button).
ChildContent RenderFragment? — Custom content rendered inside the main content area.
Href string? — Makes the item a navigation link.
OnClick EventCallback — Click handler for interactive items.
Disabled bool false Disable the item (dimmed, non-clickable).