Tesserae - List Item Text

ListItemText

Description

A two-line list item that pairs a bold title with a lighter subtitle underneath, with an optional leading icon shown inside a rounded-square background. Use it for list rows, settings entries, and notification items that need a short heading plus one line of secondary context.

Usage

Create a ListItemText with ListItemText(title, subtitle). The subtitle is optional — omit it (or pass null) to show only the title. Add a leading icon with SetIcon, and set its colors with IconForeground / IconBackground.

list-item-text-sample.cs

using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var component = VStack().Children(
                ListItemText("Project roadmap", "Last edited 3 hours ago by Alex"),
                ListItemText("Project roadmap"),
                ListItemText("General settings", "Theme, language and notifications")
                    .SetIcon(UIcons.Settings),
                ListItemText("Backup completed", "All files synced successfully")
                    .SetIcon(UIcons.Check)
                    .IconForeground("var(--tss-success-foreground-color)")
                    .IconBackground("var(--tss-success-background-color)"),
                ListItemText("Storage almost full", "Free up space to keep syncing")
                    .SetIcon(UIcons.TriangleWarning)
                    .IconForeground("var(--tss-danger-foreground-color)")
                    .IconBackground("var(--tss-danger-background-color)")
            );

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component);
        }
    }
}

API reference

class

ListItemText

public class ListItemText : ComponentBase<ListItemText, HTMLElement>

A simple two-line list item that shows a bold title with a lighter subtitle underneath, plus an optional leading icon rendered inside a rounded-square background.

Namespace: Tesserae
Inheritance: ComponentBase<ListItemText, HTMLElement> → ListItemText

Constructors

Name	Description
ListItemText	Initializes a new instance of the `ListItemText` class.

Constructor

ListItemText

public ListItemText(string title, string subtitle = null)

Initializes a new instance of the ListItemText class.

Parameters

title: The (bold) title text.
subtitle: The (lighter) subtitle text. When null or empty the subtitle is hidden.

Properties

Name	Description
Title	Gets or sets the title text.
Subtitle	Gets or sets the subtitle text. Setting it to null or empty hides the subtitle.

Property

ListItemText.Title

public string Title { get ; set ; }

Gets or sets the title text.

Property

ListItemText.Subtitle

public string Subtitle { get ; set ; }

Gets or sets the subtitle text. Setting it to null or empty hides the subtitle.

Methods

Name	Description
SetTitle	Sets the title text.
SetSubtitle	Sets the subtitle text.
SetIcon	Shows a leading icon inside a rounded-square background. Calling this again updates the existing icon.
IconForeground	Sets the color of the leading icon. Has no effect until an icon is set.
IconBackground	Sets the background color of the rounded square behind the leading icon. Has no effect until an icon is set.
Render	Renders the component's root HTML element.

Method

ListItemText.SetTitle

public ListItemText SetTitle(string title)

Sets the title text.

Method

ListItemText.SetSubtitle

public ListItemText SetSubtitle(string subtitle)

Sets the subtitle text.

Method

ListItemText.SetIcon

public ListItemText SetIcon(UIcons icon, UIconsWeight weight = UIconsWeight.Regular, TextSize size = TextSize.Medium)

Shows a leading icon inside a rounded-square background. Calling this again updates the existing icon.

Method

ListItemText.IconForeground

public ListItemText IconForeground(string color)

Sets the color of the leading icon. Has no effect until an icon is set.

Method

ListItemText.IconBackground

public ListItemText IconBackground(string color)

Sets the background color of the rounded square behind the leading icon. Has no effect until an icon is set.

Method

ListItemText.Render

public override HTMLElement Render()

Renders the component's root HTML element.

ListItemText

Description

Usage

API reference

Constructors

ListItemText

Parameters

Properties

ListItemText.Title

ListItemText.Subtitle

Methods

ListItemText.SetTitle

ListItemText.SetSubtitle

ListItemText.SetIcon

ListItemText.IconForeground

ListItemText.IconBackground

ListItemText.Render

See also