SusChipGroup

筛选 chip 行 — 由 Items + Model 驱动的单选或多选。

包

SusKit · 原子（商业）

在 Playground 中打开

SusKit · Atoms

属性

名称	类型	默认值
Items	Prop<List<ChipGroupItem>>	[]	v-model来自预设
Model	Prop<string>	""	v-model
Selection	Prop<List<string>>	[]	v-model
Multiple	Prop<bool>	false	v-model
Mandatory	Prop<bool>	false	v-model
Column	Prop<bool>	false	v-model
Disabled	Prop<bool>	false	v-model
Color	Prop<string>	"primary"	v-model
Variant	Prop<string>	"tonal"	v-model
Size	Prop<string>	"default"	v-model

插槽

没有插槽。

事件

名称	字段	载荷
Change	OnChange	string
SelectionChange	OnSelectionChange	List<string>

样式钩子

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

• keyboard-focus
• sus-chip-group
• sus-chip-group__chip
• sus-chip-group__row
• sus-chip-group--column
• sus-chip-group--disabled
• sus-chip-group--multiple
• sus-hidden

用法

条目在代码中设置（List<ChipGroupItem>）。每个条目包含 Label、Value，以及可选的 Disabled 和可选的 Count（chip 的计数器，见 SusChip）。条目的键是它的 Value，Value 为空时则是它的 Label——与 Model 使用的键相同。

var group = new SusChipGroup();
group.Items.Value = new List<SusChipGroup.ChipGroupItem>
{
    new() { Label = "All", Value = "all" },
    new() { Label = "Weapons", Value = "weapons" },
    new() { Label = "Armor", Value = "armor" },
};
group.Model.Value = "all";
group.Mandatory.Value = true;
group.Variant.Value = "tonal";
group.Color.Value = "primary";
group.OnChange += value => { /* … */ };

属性	作用
Items	List<ChipGroupItem> — 要渲染的 chip
Model	选中值（单选模式）
Multiple / Selection	多选模式及选中值
Mandatory	保持至少一项被选中
Column	垂直堆叠 chip

单选

默认情况下，组从 Items 中选出一个值：设置 Model，组就会把匹配的 chip 标记为已选并设置其样式——你无需自己在 chip 上设置 Selected 或 Variant。当 Mandatory = true 时，点击已选中的 chip 不会取消选择。OnChange 会携带新值触发。Multiple = true 切换为多值模式（Selection 和 OnSelectionChange）。禁用的条目在选择变化时保持禁用。

实时计数

SetCounts(IDictionary<string, string>) 原地更新行中已有 chip 的计数器——chip 引用、焦点和选择都保持不变：

group.SetCounts(new Dictionary<string, string> { ["all"] = "74", ["weapons"] = "3" });

• 未知的键会被忽略；键缺失的 chip 保留原有计数器。
• 空值或 null 会移除该 chip 的计数器。
• chip 在组挂载时构建，因此请在挂载之后调用 SetCounts。挂载之前，请把计数放进 Items（ChipGroupItem.Count）。

变体

filled · elevated · tonal · outlined · flat · text