跳转到内容

SusAvatarGroup

SusAvatarGroup

堆叠式队伍 / 名册头像,当 Items 超过 Max 时溢出显示 +N

SusKit · 原子(商业)

在 Playground 中打开

SusKit · Atoms

属性

名称类型默认值
MaxProp<int>3v-model
SizeProp<string>"default"v-model
RoundedProp<string>"circle"v-model

插槽

没有插槽。

事件

没有公开事件。

样式钩子

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

  • sus-avatar-group
  • sus-avatar-group__avatar
  • sus-avatar-group__avatar--first
  • sus-avatar-group__more
  • sus-avatar-group__row
  • sus-avatar-group--default
  • sus-avatar-group--large
  • sus-avatar-group--small
  • sus-avatar-group--x-large
  • sus-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" },
};
属性作用
ItemsList<AvatarGroupItem> — 要堆叠的头像
Max溢出显示 +N 前可容纳的头像数量
Size / Rounded应用于每个子头像