# @aws-northstar/ui 中文文档

规范地址：https://npmcn.com/package/%40aws-northstar/ui/

版本：1\.4\.2
npm 元数据更新时间：2025-03-27T03:59:21.493Z
中文译文更新时间：2026-11-07T16:19:55.135Z
软件包许可：Apache-2\.0

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

原始 npm 页面：https://www.npmjs.com/package/%40aws-northstar/ui
原文对照：https://npmcn.com/package/%40aws-northstar/ui/?lang=original
项目主页：https://aws.github.io/aws-northstar/
源码仓库：https://github.com/aws/aws-northstar

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

- 包体积（解压后）：1.5 MB，201 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：22 个
- peer 依赖：@cloudscape-design/components ^3，@tanstack/react-query ^4\.35\.3，@types/react ^18，@types/react-dom ^18，@types/react-router-dom ^5，react ^18，react-dom ^18，react-router-dom ^6
- 首次发布：2023-03-19T04:23:31.945Z
- 最新版本发布：2025-03-27T03:59:21.310Z
- 近 30 天下载量：5045（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：22（近 12 个月 0 个）

## 中文简介

北星设计系统 v2

## 安装

```sh
npm install @aws-northstar/ui
```

也可以使用：`pnpm add @aws-northstar/ui`、`yarn add @aws-northstar/ui`、`bun add @aws-northstar/ui`

## README

# 北星-原型设计系统

NorthStar是一个开源设计系统,具有可再使用的React组件,用于快速原型直观,有意义和方便的用户体验. 它简化了您的工作,并确保您的客户在规模上有连贯,可预测的用户体验. 以"北星"(NorthStar)为主线,可以专注于创新,用更少的资源做更多.

无论是开发者还是设计者,NorthStar都会帮助您从创建到原型的客户取悦.

北星 v2 通过杠杆作用改进了上一个版本 [云景设计系统](https://cloudscape.design/) 并更新具有新特点的现有组成部分,使发展经验更加丰富.

## 在你开始之前

在开始使用"北星"进行项目之前,请注意:

-   NorthStar目前只支持反应框架. 它支持最新的React版本,从18起.
    
-   NorthStar支持现代浏览器最新稳定的发布——Chrome,Firefox和Safari.
    
-   北星号被运走 [Apache 2.0 许可证](https://www.apache.org/licenses/LICENSE-2.0)。 。 。 .
    

## 安装

### 在反应工程中使用

```bash
// with npm
npm install @aws-northstar/ui
npm install @cloudscape-design/components

// with yarn
yarn add @aws-northstar/ui
yarn add @cloudscape-design/components
```

## 设置

在您的应用程序的顶端, 导入 NorthStar Theme Provider 组件, 并生成 NorthStar Theme Provider 组件 .

```jsx
import NorthStarThemeProvider from '@aws-northstar/v2/components/NorthStarThemeProvider';

export default () => (
    <NorthStarThemeProvider>
        ...redux provider, Apollo client provider, react router...
    </NorthStarThemeProvider>
);
```

## 使用量

以下是一个简单的例子, 能让您开始在您的应用程序中添加一个输入字段的窗体 :

```jsx
import React, { FC } from 'react';
import FormRenderer, { componentTypes, validatorTypes } from '@aws-northstar/ui/components/FormRenderer';

const MyComponent: FC = () => (
    <FormRenderer 
        onSubmit={console.log} 
        onCancel={console.log}
        schema={
            header: 'Submission Form',
            fields: [
                {
                    component: componentTypes.TEXT_FIELD,
                    name: 'email',
                    label: 'Email',
                    description: 'Email Address',
                    helperText: 'Enter a valid email address',
                    isRequired: true,
                    validate: [
                        {
                            type: validatorTypes.REQUIRED,
                        },
                        {
                            type: validatorTypes.PATTERN,
                            message: 'Invalid email address',
                            pattern: /^(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])$/i,
                        },
                    ],
                },
            ],
        }
    />
);

export default MyComponent; 
```

这个 [文档网站](https://aws.github.io/aws-northstar/) 拥有如何使用每个组件的详细实例.

学回放,看看 [反应文档](https://reactjs.org/)。 。 。 .

## 支助

我们用 [GitHub 问题](https://github.com/aws/aws-northstar/issues) 作为错误追踪器。 如果你认为你找到一个虫子,请跟着 **提交错误** 节次 [贡献指南](https://github.com/aws/aws-northstar/blob/main/CONTRIBUTING.md) 并开放一个问题,详细介绍这一问题.

## 源代码

如果你对我们的源代码感兴趣 我们的回波在 [https://github.com/aws/aws-northstar 页面存档备份,存于互联网档案馆](https://github.com/aws/aws-northstar)。 。 。 .

## 更改日志

看看这个 [更改日志](https://github.com/aws/aws-northstar/releases)

## 常见问题

### @aws-northstar/ui 是什么？

北星设计系统 v2

### 如何安装 @aws-northstar/ui？

在项目目录运行 npm install @aws-northstar/ui，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@cloudscape-design/components（^3）、@tanstack/react-query（^4\.35\.3）、@types/react（^18）、@types/react-dom（^18）、@types/react-router-dom（^5）、react（^18）、react-dom（^18）、react-router-dom（^6）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @aws-northstar/ui 支持 TypeScript 吗？

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

### @aws-northstar/ui 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @aws-northstar/ui 可以商用吗？

@aws-northstar/ui 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @aws-northstar/ui 的下载量有多少？

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

### @aws-northstar/ui 还在维护吗？

最新版本 1\.4\.2 发布于 2025/03/27（1\.6 年前）；至今共发布 22 个版本，其中过去 12 个月发布了 0 个；首次发布于 2023/03/19。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。