# @dt-dds/react-avatar 中文文档

规范地址：https://npmcn.com/package/%40dt-dds/react-avatar/

版本：1\.0\.0-beta\.86
npm 元数据更新时间：2026-11-13T11:45:50.196Z
中文译文更新时间：2026-11-13T03:17:55.714Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40dt-dds/react-avatar
原文对照：https://npmcn.com/package/%40dt-dds/react-avatar/?lang=original

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：40.2 kB，10 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：4 个
- peer 依赖：react \>=17\.0\.2，react-dom \>=17\.0\.2，@emotion/css ^11\.7\.1，@emotion/react ^11\.8\.2，@emotion/styled ^11\.8\.1
- 首次发布：2025-08-07T15:23:16.873Z
- 最新版本发布：2026-11-13T11:45:49.961Z
- 近 30 天下载量：2405（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：37（近 12 个月 26 个）

## 中文简介

神通可以用于在用户菜单,表格等中显示循环用户配置.

## 安装

```sh
npm install @dt-dds/react-avatar
```

也可以使用：`pnpm add @dt-dds/react-avatar`、`yarn add @dt-dds/react-avatar`、`bun add @dt-dds/react-avatar`

## README

# 有远见

神通可以用于在用户菜单,表格等中显示循环用户配置.

这个组件纯粹是演示式的,为了交互,它可以和IconButton一起使用.

## 图片参考

[图片](https://www.figma.com/design/kMk36nv0ZT4AHhBbw9jq0S/%E2%86%B3-1.-Daimler-Truck-DDS--Beta-?node-id=11114-41478&t=Q2vzJQbSCO9jHwxx-4)

## 阿凡达用法

### 默认

```jsx
import { Avatar } from '@dt-dds/react';

export const App = () => {
  return <Avatar title='User Name' size='medium' />;
};
```

### 带着相片

```jsx
import { Avatar } from '@dt-dds/react';

export const App = () => {
  return <Avatar type='photo' imageSrc='/profile.png' size='medium' />;
};
```

### 折叠

```jsx
import { Avatar } from '@dt-dds/react';

export const App = () => {
  return <Avatar type='collapsed' collapsedCount='+1' size='medium' />;
};
```

### 缩略图

```jsx
import { Avatar } from '@dt-dds/react';

export const App = () => {
  return <Avatar type='thumbnail' size='medium' />;
};
```

### 大小

```jsx
import { Avatar } from '@dt-dds/react';

export const App = () => {
  return (
    <>
      <Avatar title='User Name' size='small' />
      <Avatar title='User Name' size='medium' />
      <Avatar title='User Name' size='large' />
    </>
  );
};
```

### 大小不同的类型

```jsx
import { Avatar } from '@dt-dds/react';

export const App = () => {
  return (
    <>
      <Avatar type='letter' title='John Doe' size='large' />
      <Avatar type='photo' imageSrc='/profile.png' size='small' />
      <Avatar type='thumbnail' size='medium' />
      <Avatar type='collapsed' collapsedCount='+4' size='medium' />
    </>
  );
};
```

## API 密码

### 有远见

此组件可以通过在道具中传递字符串来包含最多两个简单的字符 `title`

| 财产 | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `title` | `string` | \- 说吧 | 在外观中显示的字母字符 |
| `type` | `AvatarType` | `'letter'` | 选择 Avatar 使用的视觉样式。 接受 :  
二. 支助 `'letter'` - 显示首字母.  
二. 支助 `'collapsed'` – 显示组外溢的"+N".  
二. 支助 `'thumbnail'` - 通用占位符图标.  
二. 支助 `'photo'` - 用途 `imageSrc` 自动倒计时键入缩略图. |
| `size` | `AvatarSize` | `'medium'` | 控制"神通"维度. 接受 :  
二. 支助 `'small'` - 紧凑的UI.  
二. 支助 `'medium'` - 默认.  
二. 支助 `'large'` ——突出/突出用途. |
| `imageSrc` | `string` | \- 说吧 | 可选图像路径( 仅与“ 图片” 类型相通) |
| `dataTestId` | `string` | 阿凡达 | 神通测试标识符 |
| `collapsedCount` | `string` | “+1” | 显示在倒塌的外形内的数字( 最大 3 个字符) 。 默认为 `'+1'` 何时 `type="collapsed"`。 。 。 . |
| `customInitials` | `string` | \- 说吧 | 自定义要显示的首字母( 最大 2 个字符) 。 替换 `title` 如果现在. |
| `hasTooltip` | `Boolean` | 虚假 | 在神通上徘徊时显示工具提示 |

### 图标按钮中的默认神通国

当"Avatar"由"IconButton"组成时,交互状态由"IconButton"的风格处理. 下表显示默认外观:

| 神通类型 | 被迫放弃的国家 | 残疾状态 |
| --- | --- | --- |
| 信件 | `primary.dark` | `primary.light` |
| 缩略图 | `primary.dark` | `primary.light` |
| 折叠 | `primary.light` | `content.contrast` |
| 图片 | 无变动 | 38%不透明 |

**自定义 :** 使用 `cssOverrides` 覆盖默认徘徊状态或应用自定义主题颜色的道具 .

### 阿凡达数据属性

当在 IconButton 内部使用 Avatar 时, 瞄准以下带有 cs Overrides 的数据属性 :

| 属性 | 神通类型 |
| --- | --- |
| `[data-avatar-type='letter']` | 信件 |
| `[data-avatar-type='thumbnail']` | 缩略图 |
| `[data-avatar-type='collapsed']` | 崩溃 |
| `[data-avatar-type='photo']` | 图片 |

图标按钮提供了csOverrides道克,允许您对图标按钮及其子孙应用自定义 CSS 样式. 这使得与"神通"一起使用时能够完全有样式的灵活性.

#### 示例: 有自定义样式的神通

目标 Avatar 类型使用 \[data- avatar-type\] 属性选择器定制其交互状态:

```jsx
import { IconButton } from '@dt-dds/react-icon-button';
import { Avatar } from '@dt-dds/react-avatar';
import { css } from '@emotion/react';

export const CustomAvatarButton = () => {
  const avatarHoverStyles = css`
    &:hover:not(:disabled) {
      [data-avatar-type='letter'] {
        background-color: #a020f0;
      }
    }
  `;

  return (
    <IconButton ariaLabel='User' cssOverrides={avatarHoverStyles}>
      <Avatar title='John Doe' type='letter' customInitials='JD' />
    </IconButton>
  );
};
```

## 堆栈

-   [类型脚本](https://www.typescriptlang.org/) 用于静态类型检查
-   [反应](https://reactjs.org/) — JavaScript 用户界面库
-   [情感](https://emotion.sh/docs/introduction) 用于使用 JavaScript 写入 Css 样式
-   [故事书](https://storybook.js.org/) ——由Vite供电的UI组件环境
-   [欢乐](https://jestjs.io/) - JavaScript 测试框架
-   [反应测试库](https://testing-library.com/) - 以用户为中心测试用户界面组件
-   [ESLint 语录](https://eslint.org/) 代码林入
-   [高级](https://prettier.io/) 用于代码格式
-   [苏普](https://github.com/egoist/tsup) - 由Esbuild供电的脚本捆绑机
-   [雅伦](https://yarnpkg.com/) 从管理软件包

## 图标

-   `yarn build` - 制作软件包
-   `yarn dev` - 在当地运行软件包
-   `yarn lint` - 将所有文件输入此软件包
-   `yarn test` - 测试所有单位
-   `yarn test:report` - 打开测试覆盖报告
-   `yarn test:update:snapshot` - 进行所有单元测试并更新快照

## 汇编

运行 `yarn build` 从软件包的根部 [齐声](https://tsup.egoist.dev/) 将原始的 TypeScript 和 React 代码编译为普通 JavaScript .

这个 `/dist` 文件夹包含编译输出.

```bash
avatar
└── dist
    ├── index.d.ts  <-- Types
    ├── index.js    <-- CommonJS version
    └── index.mjs   <-- ES Modules version
    ...
```

## 版本

跟着 [语义版本](https://semver.org/)

## 许可证

许可证根据 [MIT 许可证](https://npmcn.com/package/%40dt-dds/react-avatar/LICENSE)

## 常见问题

### @dt-dds/react-avatar 是什么？

神通可以用于在用户菜单,表格等中显示循环用户配置\.

### 如何安装 @dt-dds/react-avatar？

在项目目录运行 npm install @dt-dds/react-avatar，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=17\.0\.2）、react-dom（\>=17\.0\.2）、@emotion/css（^11\.7\.1）、@emotion/react（^11\.8\.2）、@emotion/styled（^11\.8\.1）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @dt-dds/react-avatar 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @dt-dds/react-avatar 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @dt-dds/react-avatar 可以商用吗？

@dt-dds/react-avatar 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @dt-dds/react-avatar 的下载量有多少？

根据 npm 官方下载统计，@dt-dds/react-avatar 在 2026/10/13 – 2026/11/11 这 30 天内被下载 2,405 次，日均约 80 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @dt-dds/react-avatar 还在维护吗？

最新版本 1\.0\.0-beta\.86 发布于 2026/11/13（今天）；至今共发布 37 个版本，其中过去 12 个月发布了 26 个；首次发布于 2025/08/07。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。