SusAvatarGroup
![]()
堆叠式队伍 / 名册头像,当 Items 超过 Max 时溢出显示 +N。
包
SusKit · 原子(商业)
属性
| 名称 | 类型 | 默认值 | |
|---|---|---|---|
Max | Prop<int> | 3 | v-model |
Size | Prop<string> | "default" | v-model |
Rounded | Prop<string> | "circle" | v-model |
插槽
没有插槽。
事件
没有公开事件。
样式钩子
USS 类契约 — 无需改 C# 即可覆盖外观。状态通过这些类切换:
sus-avatar-groupsus-avatar-group__avatarsus-avatar-group__avatar--firstsus-avatar-group__moresus-avatar-group__rowsus-avatar-group--defaultsus-avatar-group--largesus-avatar-group--smallsus-avatar-group--x-largesus-avatar-group--x-small
用法
条目在代码中设置(List<AvatarGroupItem>)。每个条目包含 Text,以及可选的 Image / Color / Status。
csharp
var group = new SusAvatarGroup();
group.Size.Value = "default";
group.Max.Value = 3;
group.Rounded.Value = "circle";
group.Items.Value = new List<SusAvatarGroup.AvatarGroupItem>
{
new() { Text = "Alice", Color = "primary", Status = "online" },
new() { Text = "Bob", Color = "success", Status = "away" },
new() { Text = "Cara", Color = "info", Status = "busy" },
new() { Text = "Dan", Color = "warning", Status = "offline" },
};| 属性 | 作用 |
|---|---|
Items | List<AvatarGroupItem> — 要堆叠的头像 |
Max | 溢出显示 +N 前可容纳的头像数量 |
Size / Rounded | 应用于每个子头像 |