HIsheR
23 lines
1.2 KiB
TypeScript
23 lines
1.2 KiB
TypeScript
import { h } from '@ui-arch/frame';
|
|
import { avatar } from './avatar.js';
|
|
import type { AvatarGroupProps } from './types.js';
|
|
|
|
/*** 头像组：横向叠放（负边距 + 底色描边切口），超出 max 折叠成 +N，整组 title 列出全部姓名 ***/
|
|
export function avatarGroup(props: AvatarGroupProps): HTMLElement {
|
|
const size = props.size ?? 32; // 直径与单个 avatar 一致
|
|
const max = Math.max(props.max ?? 4, 1); // 至少留一个位置，避免传 0 后只剩 +N
|
|
const shown = props.items.slice(0, max); // 展示前 max 个
|
|
const rest = props.items.length - shown.length;
|
|
const group = h('div', {
|
|
class: 'ua-avatar-group',
|
|
title: props.items.map((item) => item.name).join('、'), // 折叠后仍能看到全部成员
|
|
}, ...shown.map((item) => avatar({ name: item.name, src: item.src, variant: item.variant, size })));
|
|
if (rest <= 0) return group; // 卫语句：没超上限就不渲染 +N
|
|
group.append(h('span', {
|
|
class: 'ua-avatar ua-avatar-more',
|
|
style: `width:${size}px;height:${size}px;font-size:${Math.round(size * 0.38)}px`,
|
|
'aria-label': `还有 ${rest} 人`, // 纯文本 +N 读屏会念成「加 3」，补可访问名
|
|
}, `+${rest}`));
|
|
return group;
|
|
}
|