SusListGroup

Selectable list of rows — title / subtitle densify via Items + display keys.

Package

SusKit · Molecules (commercial)

SusKit · Molecules

Props

Name	Type	Default
`Selected`	`Prop<object>`	`null`	v-model
`ItemTitle`	`Prop<string>`	`""`	v-model
`ItemValue`	`Prop<string>`	`""`	v-model
`ItemSubtitle`	`Prop<string>`	`""`	v-model
`Density`	`Prop<string>`	`"default"`	v-model
`Lines`	`Prop<string>`	`"one"`	v-model
`Nav`	`Prop<bool>`	`false`	v-model
`Disabled`	`Prop<bool>`	`false`	v-model
`RowChrome`	`Prop<bool>`	`false`	v-model

Slots

Name
`(default)`

Events

Name	Field	Payload
`Selected`	`OnSelected`	`object`

Style hooks

USS class contract — override appearance without touching C#. States toggle via these classes:

keyboard-focus
sus-list-group
sus-list-group__item
sus-list-group__item--disabled
sus-list-group__item--selected
sus-list-group__item-append
sus-list-group__item-append-text
sus-list-group__item-icon
sus-list-group__item-subtitle
sus-list-group__item-subtitle--ellipsis
sus-list-group__item-text
sus-list-group__item-title
sus-list-group__lines--multi
sus-list-group__lines--one
sus-list-group--comfortable
sus-list-group--dense
sus-list-group--disabled
sus-list-group--nav
sus-list-group--row-chrome

Usage

Items is a List<object> (dictionaries or POCOs). Use ItemTitle / ItemSubtitle / ItemValue for property names.

csharp

var list = new SusListGroup();
list.ItemTitle.Value = "Title";
list.ItemSubtitle.Value = "Subtitle";
list.Lines.Value = "two";
list.Items.Value = new List<object>
{
    new Dictionary<string, object> { ["Title"] = "Squad Alpha", ["Subtitle"] = "12 units" },
    new Dictionary<string, object> { ["Title"] = "Squad Beta", ["Subtitle"] = "8 units" },
    new Dictionary<string, object> { ["Title"] = "Squad Gamma", ["Subtitle"] = "15 units" },
};
list.OnSelected += item => { /* … */ };

xml

<template>
  <sus:SusListGroup ItemTitle="Title"
                    ItemSubtitle="Subtitle"
                    Lines="two"
                    :Selected="Selected.Value"
                    :Nav="Nav.Value"
                    :Disabled="Disabled.Value"
                    @selected="OnSelected" />
</template>

<script>
public Prop<object> Selected = new(null);
public Prop<bool> Nav = new(false);
public Prop<bool> Disabled = new(false);
void OnSelected(object item) { Selected.Value = item; }
// Populate Items in code.
</script>

Prop	Role
`Items`	Rows (`List<object>`)
`ItemTitle` / `ItemValue` / `ItemSubtitle`	Property names on each item
`Selected`	Current selection
`Lines`	`one` · `two` · `three`
`Density`	`default` · `compact` · `comfortable`
`Nav`	Navigation styling

Notes

Optional item keys: Icon / PrependIcon, AppendIcon, AppendText.
Manual mode: skip Items and place custom children in the default slot.

SusListGroup ​