#ListItem

A ListItem is a row of a list: a picture at the left, a title with a description, and actions at the right. The whole row can be one button.

How to make rows with an avatar, with actions, and a row that the user clicks:

<tb:ListItem title="Ada Lovelace" description="Owner">
    <tb:UserAvatar display-name="Ada Lovelace" class="tb-list-item__media" />
    <ui:Button text="Remove" name="removeAda" />
</tb:ListItem>
<tb:ListItem title="Two-factor sign-in" description="Ask for a code at each sign-in." outline="true">
    <tb:Switch />
</tb:ListItem>
<tb:ListItem name="openProject" title="Open a project" description="Pick a folder on this computer." clickable="true" />

root.Q<ListItem>("openProject").Clicked += openProject;

var row = new ListItem { Title = "Report.pdf", Description = "2.4 MB", Icon = Background.FromTexture2D(fileIcon) };
row.Add(new Button(download) { text = "Download" });
list.Add(row);

• The children of the row are its actions. They go to the right end of the row.
• A child with the class tb-list-item__media goes to the left of the title. The row moves this child when it attaches to a panel.
• A clickable row shows the hover color, takes the focus with Tab and the arrow keys, and shows the focus border.
• Enter, Space and the submit button of a gamepad click the focused row.
• A click on an action button does not click the row.
• A long title or description wraps.

Tips:

• Use Icon for a small picture, and the media class for a larger element such as a UserAvatar.
• Use a clickable row with no action buttons for a menu of places to go. Use a row with action buttons for a list that the user edits.
• For a list with many rows, put the rows in a ScrollView. For hundreds of rows of data, use a ListView or a DataGrid.
• Put a Separator between rows without an outline.

#Styling

.tb-list-item { padding: 8px 12px; }
.tb-list-item--clickable:hover { background-color: var(--tb-color-surface-alt); }