# 头像组溢出

## 使用方法

`AvatarGroupOverflow` 放在头像组的末尾，用来交代那些没有单独画出来的人。一组成员被截成几个头像、但剩下多少人仍然要紧时，就用它。

`count` 是没画出来的人数，读屏读到的名字也由它拼出来，所以它要和看到的数字对得上。这个名字跟着当前语言走，英文念 "5 more"，中文念「还有 5 项」。默认插槽可以换掉 `+N` 这段文字；文字短时标记是个圆，文字长一点就长成胶囊，数字总能塞得下。加了 `@click`，这个标记就变成能聚焦的真按钮；不加，它只是一张静态图。

```vue
<script setup lang="ts">
import { Avatar } from '@astryx-vue/core/Avatar'
import { AvatarGroup, AvatarGroupOverflow } from '@astryx-vue/core/AvatarGroup'
</script>

<template>
  <AvatarGroup size="lg">
    <Avatar name="Alex Daniels" />
    <Avatar name="Ann Smith" />
    <AvatarGroupOverflow :count="12" />
  </AvatarGroup>
</template>
```

### 结构

- **计数文字**: 圆圈里那段紧凑的 `+N`，或者自己写的计数文字。
- **按钮行为**: 传了 `onClick` 之后，这个圆圈变成可交互的按钮，有聚焦和悬停状态。

## 建议

| 指引 | 实践 |
| --- | --- |
| 推荐 | `count` 传真实的隐藏人数，这样读屏读到的名字和看到的数字是一致的。 |
| 推荐 | 自定义文字用 `+12`、`99+` 这种短的。标记短的时候是圆，长一点会自己长成胶囊，数字总能塞得下。 |
| 推荐 | 点开之后要弹成员名单、浮层或者详情时，配上 `onClick`。 |
| 避免 | 不要让自定义文字和 `count` 说两件事。读屏读的仍是 `count`。 |
| 避免 | 别往标记里塞长文字。虽然它会拉成胶囊，但里面放一整句只会变成噪音；想交代更多参与者信息，放在头像组旁边。 |

## 示例

常见的用法和不同的状态。

### 自定义文字

隐藏的人数需要按产品习惯写得更紧凑时，塞一段像 12+ 这样的短文字进去。

```vue
<script setup lang="ts">
import { Avatar } from '@astryx-vue/core/Avatar'
import { AvatarGroup, AvatarGroupOverflow } from '@astryx-vue/core/AvatarGroup'
import { Stack } from '@astryx-vue/core/Stack'
import { Text } from '@astryx-vue/core/Text'
</script>

<template>
  <Stack :gap="3" direction="vertical">
    <Text type="supporting" color="secondary">
      Team members
    </Text>
    <AvatarGroup label="Avatars" size="lg">
      <Avatar name="Alex Daniels" />
      <Avatar name="Ann Smith" />
      <Avatar name="Carol Davis" />
      <AvatarGroupOverflow :count="12">
        12+
      </AvatarGroupOverflow>
    </AvatarGroup>
  </Stack>
</template>
```

### 默认计数

不塞任何内容，就用默认的 +N 计数。

```vue
<script setup lang="ts">
import { Avatar } from '@astryx-vue/core/Avatar'
import { AvatarGroup, AvatarGroupOverflow } from '@astryx-vue/core/AvatarGroup'
import { Stack } from '@astryx-vue/core/Stack'
import { Text } from '@astryx-vue/core/Text'
</script>

<template>
  <Stack :gap="3" direction="vertical">
    <Text type="supporting" color="secondary">
      Reviewers
    </Text>
    <AvatarGroup label="Avatars" size="lg">
      <Avatar name="Alex Daniels" />
      <Avatar name="Ann Smith" />
      <Avatar name="Carol Davis" />
      <AvatarGroupOverflow :count="2" />
    </AvatarGroup>
  </Stack>
</template>
```

### 宽计数

数字变宽时圆圈会拉成胶囊：高度不变，只有宽度在长，四位数也塞得下。

```vue
<script setup lang="ts">
import { Avatar } from '@astryx-vue/core/Avatar'
import { AvatarGroup, AvatarGroupOverflow } from '@astryx-vue/core/AvatarGroup'
import { Stack } from '@astryx-vue/core/Stack'
import { Text } from '@astryx-vue/core/Text'
</script>

<template>
  <Stack :gap="3" direction="vertical">
    <Text type="supporting" color="secondary">
      Wide count
    </Text>
    <AvatarGroup label="Avatars" size="lg">
      <Avatar name="Alex Daniels" />
      <Avatar name="Ann Smith" />
      <AvatarGroupOverflow :count="1245">
        1,245+
      </AvatarGroupOverflow>
    </AvatarGroup>
  </Stack>
</template>
```

## 属性

| 属性 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| `count` | `number` | — | 藏起来的头像数量。显示成 `+N`，读屏名也用它拼，并且跟着当前语言走（英文念 `5 more`）。传负数按 0 算。必填。 |

## 事件

- `click(event: MouseEvent)`：点这个标记时触发。绑了这个监听，标记才会变成能聚焦的按钮。

## 插槽

- `default`：自定义的计数文字，例如 `12+`。不写就用 `+N`。文字短时标记是个圆，文字长一点就长成胶囊，数字总能塞得下。