# @dt-dds/react-app-header 中文文档

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

版本：1\.0\.0-beta\.111
npm 元数据更新时间：2026-11-13T11:45:51.094Z
中文译文更新时间：2026-11-12T23:01:29.362Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：70.5 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-11-26T15:37:44.578Z
- 最新版本发布：2026-11-13T11:45:50.805Z
- 近 30 天下载量：5019（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：108（近 12 个月 108 个）

## 中文简介

Appheader是一个灵活的复合组件,提供完整的应用程序头,支持多版式,反应行为,以及可自定义的部分,包括标志,app名,导航,动作按钮等.

## 安装

```sh
npm install @dt-dds/react-app-header
```

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

## README

# 应用程序头

Appheader是一个灵活的复合组件,提供完整的应用程序头,支持多版式,反应行为,以及可自定义的部分,包括标志,app名,导航,动作按钮等.

## 图片参考

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

## 应用程序头使用

```jsx
import { AppHeader } from '@dt-dds/react-app-header';
import { Icon } from '@dt-dds/react-icon';
import { IconButton } from '@dt-dds/react-icon-button';

export const App = () => {
  return (
    <AppHeader type='standard'>
      <AppHeader.Actions position='left'>
        <IconButton ariaLabel='menu' onClick={() => null}>
          <Icon code='menu' />
        </IconButton>
      </AppHeader.Actions>

      <AppHeader.AppName name='My App' />

      <AppHeader.Logo>
        <img src='/logo.svg' alt='Logo' />
      </AppHeader.Logo>

      <AppHeader.Navigation position='center'>
        <ul>
          <li>
            <a href='/home'>Home</a>
          </li>
          <li>
            <a href='/about'>About</a>
          </li>
        </ul>
      </AppHeader.Navigation>

      <AppHeader.Actions position='right'>
        <IconButton ariaLabel='search' onClick={() => null}>
          <Icon code='search' />
        </IconButton>
      </AppHeader.Actions>
    </AppHeader>
  );
};
```

## API 密码

### 应用程序头

管理所有儿童部件的布局和状态的主要容器部分.

| 财产 | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `type` | `'standard' | 'compact'` | `standard` | 确定页眉布局. `standard` 在标识前显示应用程序名称, `compact` 后显示标志. |
| `style` | `React.CSSProperties` | \- 说吧 | 自定义适用于信头容器的 CSS 属性 |
| `children` | `ReactNode` | \- 说吧 | 子组件: Logo、 AppName、 导航和动作 |

### Appheiper (英语). 标记

申请标志的容器. 根据信头类型和布局自动调整定位.

| 财产 | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `children` | `ReactNode` | \- 说吧 | Logo 内容( 典型的图像) |
| `style` | `React.CSSProperties` | \- 说吧 | 自定义 CSS 属性 |

### Appheiper (英语). 应用程序Name

显示基于头型的自动打字样式的应用程序名称.

| 财产 | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `name` | `string` | \- 说吧 | 应用程序名称文本 |
| `children` | `ReactNode` | \- 说吧 | 备选案文 `name` 自定义内容的道具 |
| `style` | `React.CSSProperties` | \- 说吧 | 自定义 CSS 属性 |

### Appheiper (英语). 导航

导航连接容器。 支持灵活定位和反应灵敏的能见度.

| 财产 | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `children` | `ReactNode` | \- 说吧 | 导航内容( 通常是链接列表) |
| `position` | `'center' | 'left' | 'right'` | `center` | 信头内的导航位置 |
| `style` | `React.CSSProperties` | \- 说吧 | 自定义 CSS 属性 |

### Appheiper (英语). 行动

用于动作按钮和控制(搜索、菜单、用户简介等)的容器。 支持左右定位.

| 财产 | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `children` | `ReactNode` | \- 说吧 | 动作按钮和控件 |
| `position` | `'left' | 'right'` | `right` | 行动在标题中的位置 |
| `style` | `React.CSSProperties` | \- 说吧 | 自定义 CSS 属性 |

#### 响应道具

所有化合物组件`Logo`, (中文(简体) ), `AppName`, (中文(简体) ), `Navigation`, (中文(简体) ), `Actions`(a) 支持通过下列方式提高能见度: `hide` 财务报告和审定财务报表 `show` 道具 :

-   **`hide`**: 当媒体查询匹配时隐藏组件(例如,), `hide={`(微风:${主题.breakpoints.mq3}px)`}` 隐藏在桌面上)
-   **`show`**:仅在媒体查询匹配时显示组件(如:, `show={`(最大宽度: ${主题. breakpoints.mq3}}px)`}` 仅在手机上显示)
-   如果两者兼有 `hide` 财务报告和审定财务报表 `show` 提供, `hide` 优先排序

## 堆栈

-   [类型脚本](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
app-header
└── 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-app-header/LICENSE)

## 常见问题

### @dt-dds/react-app-header 是什么？

Appheader是一个灵活的复合组件,提供完整的应用程序头,支持多版式,反应行为,以及可自定义的部分,包括标志,app名,导航,动作按钮等\.

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

在项目目录运行 npm install @dt-dds/react-app-header，或使用 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-app-header 支持 TypeScript 吗？

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

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

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

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

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

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

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

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

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