# @18f/identity-design-system 中文文档

规范地址：https://npmcn.com/package/%4018f/identity-design-system/

版本：9\.8\.0
npm 元数据更新时间：2026-08-21T18:06:56.074Z
中文译文更新时间：2026-11-05T23:31:00.599Z
软件包许可：CC0-1\.0

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

原始 npm 页面：https://www.npmjs.com/package/%4018f/identity-design-system
原文对照：https://npmcn.com/package/%4018f/identity-design-system/?lang=original
项目主页：https://github.com/18F/identity-design-system#readme
源码仓库：https://github.com/18F/identity-design-system

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

- 包体积（解压后）：32.2 MB，7226 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=12
- 运行依赖：2 个
- 首次发布：2023-04-20T16:56:36.058Z
- 最新版本发布：2026-08-21T18:06:55.751Z
- 近 30 天下载量：9484（2026-10-05 至 2026-11-03，npm 官方下载统计）
- 已发布版本数：22（近 12 个月 5 个）

## 中文简介

Login.gov的全球风格

## 安装

```sh
npm install @18f/identity-design-system
```

也可以使用：`pnpm add @18f/identity-design-system`、`yarn add @18f/identity-design-system`、`bun add @18f/identity-design-system`

## README

# 登录.gov 设计系统

Login.gov 设计系统是该软件的扩展 [美国网络设计系统](https://designsystem.digital.gov/) 用于Login.gov站点一致识别Login.gov品牌.

这些文件描述了在新项目中如何使用Login.gov设计系统. 读取 [捐款额](https://github.com/18F/identity-design-system/blob/main/CONTRIBUTING.md) 学习如何为设计系统本身做出贡献.

## 安装

[节点.js](https://nodejs.org/en) 需要使用 Login.gov 设计系统。 如果还没有安装, 您应该先安装它 .

接下来,使用您项目目录中的国家预防机制安装软件包:

```
npm install @18f/identity-design-system
```

## 使用量

作为美国网络设计系统的延伸, [页:1 _开始开发者_](https://designsystem.digital.gov/documentation/getting-started-for-developers/) 指南可以成为有用的资源。 Login.gov设计系统旨在作为USWDS的倒置取而代之,使其所有文件都申请Login.gov设计系统. 你唯一需要做的改动是更新任何参考文献 `@uswds/uswds` 与 `@18f/identity-design-system`。 。 。 .

### 样式

Login.gov 设计系统使用 [萨斯](https://sass-lang.com/) 生成样式表。 虽然你可以使用任何 Sass 编译程序,但我们建议 [`@18f/identity-build-sass`](https://www.npmjs.com/package/@18f/identity-build-sass),因为它支持任何已经具备了Node.js的环境,而且它预示着与设计系统完全相适应的默认行为.

以下是一个导入设计系统的实例样式表:

```scss
@use 'uswds-core';
@forward 'uswds';
```

Sass汇编的唯一要求是:

-    [气体加载路径](https://sass-lang.com/documentation/cli/dart-sass#load-path) 必须包括 `node_modules/@18f/identity-design-system/packages`
-   你一定在用那个 [达特萨斯](https://sass-lang.com/dart-sass) 执行萨斯

如果你在用的话 `@18f/identity-build-sass`,以下命令将编译 CSS 文件到 `build/styles.css`数字 :

```
npx build-sass path/to/styles.css.scss --out-dir=build
```

#### 浏览器- Ready CSS 套装

虽然建议导入 Login.gov 设计系统作为 Sass 模块支持 [优化选项](https://npmcn.com/package/%4018f/identity-design-system/#readme-optimization),预编译的 CSS 捆绑为方便或无法包含 Sass 构建过程的项目提供.

这些文件在 `dist/assets/css` 联 合 国 [已公布的国家预防机制一揽子计划](https://www.npmjs.com/package/@18f/identity-design-system?activeTab=code)。当本地安装时,此选项在 `node_modules/@18f/identity-design-system`。 。 。 .

```html
<html>
  <head>
    <!-- ... -->
    <link rel="stylesheet" href="/path/to/identity-design-system/dist/assets/css/styles.css">
  </head>
  <body>
    <!-- ... -->
  </body>
</html>
```

### Java 脚本

作为国家防范机制软件包,您可以在项目进口的任何地方导入Login.gov设计系统:

```js
import '@18f/identity-design-system';
```

默认情况下, 这将包含 JavaScript _每个_ 组件,可以增加用户的加载时间,并为开发者构建时间。 参见 [以下选项部分](https://npmcn.com/package/%4018f/identity-design-system/#readme-optimization) 来学习如何优化 JavaScript 导入.

#### 浏览器- Ready JavaScript 套装

建议将Login.gov设计系统作为国家防范机制软件包导入,以支持 [优化选项](https://npmcn.com/package/%4018f/identity-design-system/#readme-optimization),预编译的JavaScript捆绑提供方便或无法包含JavaScript构建过程的项目.

这些文件在 `dist/assets/js` 联 合 国 [已公布的国家预防机制一揽子计划](https://www.npmjs.com/package/@18f/identity-design-system?activeTab=code)。当本地安装时,此选项在 `node_modules/@18f/identity-design-system`。 。 。 .

```html
<html>
  <head>
    <!-- ... -->
    <script src="/path/to/identity-design-system/dist/assets/js/init.js"></script>
  </head>
  <body>
    <!-- ... -->
    <script src="/path/to/identity-design-system/dist/assets/js/main.js"></script>
  </body>
</html>
```

## 选项

### 优化

如果您的项目没有使用设计系统的所有组件, 建议您通过选取您正在使用的单个组件来优化您的构建 .

在 Sass 中,您可以通过替换转发 `'uswds'` 模块,包含单个组件的软件包:

```diff
@use 'uswds-core';
- @forward 'uswds';
+ @forward 'usa-accordion';
```

您可以在 [每个组成部分的文件](https://designsystem.digital.gov/components/overview/) (例如:. [手风琴 包件](https://designsystem.digital.gov/components/accordion/#accordion-package)) (中文(简体) ).

在JavaScript中,可以导入JavaScript包的命名成员. 如果您正在使用一个支持去除已死代码的捆绑器, 任何未使用的组件都会从编译的输出中删除 。 每个已命名的导入包含一个 `on` 在页面上初始化组件的方法.

```diff
- import '@18f/identity-design-system';
+ import { accordion } from '@18f/identity-design-system';
+ accordion.on();
```

### 主题变量

Login.gov设计系统配置了USWDS主题变量,以提供设计用于所有Login.gov站点的默认. 这些应该几乎总是在箱外运作,不需要进一步的配置.

如果需要,您可以使用 [配置设置的文档进程](https://designsystem.digital.gov/documentation/settings/),在导入时提供变量 `uswds-core` 软件包 :

```diff
- @use 'uswds-core';
+ @use 'uswds-core' with (
+   $theme-body-font-size: 'sm'
+ );
```

## 许可证

见 [自由主义](https://github.com/18F/identity-design-system/blob/main/LICENSE) 许可信息.

## 常见问题

### @18f/identity-design-system 是什么？

Login\.gov的全球风格

### 如何安装 @18f/identity-design-system？

在项目目录运行 npm install @18f/identity-design-system，或使用 pnpm add / yarn add / bun add。

### @18f/identity-design-system 支持 TypeScript 吗？

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

### @18f/identity-design-system 支持 ESM 还是 CommonJS？

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

### @18f/identity-design-system 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=12。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @18f/identity-design-system 可以商用吗？

@18f/identity-design-system 使用 CC0-1\.0 许可。作者放弃著作权，可不受限制地使用。以上为概括，不构成法律意见，请以许可原文为准。

### @18f/identity-design-system 的下载量有多少？

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

### @18f/identity-design-system 还在维护吗？

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