SusListGroup

可选择的行列表 —— 通过 Items + 显示键生成 title / subtitle 密集布局。

包

SusKit · 分子（商业）

在 Playground 中打开

SusKit · Molecules

属性

名称	类型	默认值
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

插槽

名称
（默认）

事件

名称	字段	载荷
Selected	OnSelected	object

样式钩子

USS 类契约 — 无需改 C# 即可覆盖外观。状态通过这些类切换：

• 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

用法

Items 是 List<object>（字典或 POCO）。用 ItemTitle / ItemSubtitle / ItemValue 指定属性名。

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 => { /* … */ };

<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	行数据（List<object>）
ItemTitle / ItemValue / ItemSubtitle	每个项上的属性名
Selected	当前选中项
Lines	one · two · three
Density	default · compact · comfortable
Nav	导航样式

备注

• 可选项键：Icon / PrependIcon、AppendIcon、AppendText。
• 手动模式：跳过 Items，直接在默认插槽中放置自定义子元素。