# @engie-group/fluid-design-system 中文文档

规范地址：https://npmcn.com/package/%40engie-group/fluid-design-system/

版本：6\.4\.0
npm 元数据更新时间：2026-09-08T16:39:50.637Z
中文译文更新时间：2026-11-13T17:16:06.815Z
软件包许可：EPL-2\.0

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

原始 npm 页面：https://www.npmjs.com/package/%40engie-group/fluid-design-system
原文对照：https://npmcn.com/package/%40engie-group/fluid-design-system/?lang=original
项目主页：https://www.engie.design/fluid-design-system/
源码仓库：https://github.com/FluidDesignSystem/fluid-design-system

弃用说明：Deprecated and no longer maintained\. Migrate to @engie-group/fluid-design-system-webcomponents

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

- 包体积（解压后）：1 MB，110 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：2 个
- 首次发布：2019-11-21T10:16:10.251Z
- 最新版本发布：2026-09-08T16:27:42.581Z
- 近 30 天下载量：7564（2026-10-14 至 2026-11-12，npm 官方下载统计）
- 已发布版本数：116（近 12 个月 10 个）

## 中文简介

Fluid Design System是ENGIE的开源库,以更有效的方式创建,构建和提供ENGIE数字服务.

## 安装

```sh
npm install @engie-group/fluid-design-system
```

也可以使用：`pnpm add @engie-group/fluid-design-system`、`yarn add @engie-group/fluid-design-system`、`bun add @engie-group/fluid-design-system`

## README

# 流体设计系统 Vanilla JS

[流线](https://www.engie.design/fluid-design-system/) 是Engie的设计系统,是用于建造Engie数字产品的可再使用的组件和样式的集合.

以下是在您打字计划中从 Fluid 组件和样式中受益的软件包 .

## 折旧通知

`@engie-group/fluid-design-system` 已贬值。 载有这一通知的释放是Vanilla JS图书馆的最后释放。 之后将不提供新特性、错误修正、安全更新或发布.

迁移到 [`@engie-group/fluid-design-system-webcomponents`](https://www.npmjs.com/package/@engie-group/fluid-design-system-webcomponents),支持的后继者。 这不是临时替换:请咨询 [Web 组件文档](https://fluid.design.digital.engie.com/fluid-design-system/storybook/webcomponents/index.html) 每个组件的标记和API.

```shell
npm install @engie-group/fluid-design-system-webcomponents @engie-group/fluid-design-tokens
```

### 为什么改变?

-   **增强互操作性**:Web组件与所有现代框架(React,Angular,Vue等)本土相容,无需任何框架即可被使用.
-   **简化维修**:为所有环境建立单一的代码基础,减少技术债务并让未来的演化更加容易.
-   **标准化**:采用网络标准可确保更好的可持续性和可扩展性.

对于迁移支持,请查阅Web组件文档或联系Fluid团队.

-   [版本](https://npmcn.com/package/%40engie-group/fluid-design-system/#readme-versioning)
-   [开始](https://npmcn.com/package/%40engie-group/fluid-design-system/#readme-getting-started)
    -   [国家预防机制的安装](https://npmcn.com/package/%40engie-group/fluid-design-system/#readme-npm-installation)
    -   [CDN 安装](https://npmcn.com/package/%40engie-group/fluid-design-system/#readme-cdn-installation)
-   [文件和使用情况](https://npmcn.com/package/%40engie-group/fluid-design-system/#readme-documentation-and-usage)
-   [解决问题和专题请求](https://npmcn.com/package/%40engie-group/fluid-design-system/#readme-troubleshooting-and-feature-requests)

## 版本

QQ 本套件不遵循语义化的版本,在小版本中引入了断开的修改.

版本结构如下: `GLOBAL.BREAKING.MINOR` 其中:

-   `GLOBAL` 这是 **流体设计系统的全球版本** (出:活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活 我们现在是 `Fluid 6`。 。 。 .
-   `BREAKING` 逐一递增 **中断更改** (组件 API 更改,布局更改等).
-   `MINOR` 为错误递增 **修正、特征和非突破性更改**。 。 。 .

我们建议 **使用 `~` semver 范围** 以避免打破影响应用程序的更改. 此外,我们建议检查 [变化](https://fluid.design.digital.engie.com/fluid-design-system/storybook/vanilla/index.html?path=/docs/docs-changelog--documentation) 在发布后更新软件包.

## 开始

这个包可以直接安装在国家预防机制或通过CDN安装.

### 国家预防机制的安装

您可以通过 [无](https://www.npmjs.com/package/@engie-group/fluid-design-system)数字 :

```shell
# Using npm
npm install @engie-group/fluid-design-system @engie-group/fluid-design-tokens

# Using pnpm
pnpm add @engie-group/fluid-design-system @engie-group/fluid-design-tokens

# Using yarn
yarn add @engie-group/fluid-design-system @engie-group/fluid-design-tokens
```

#### 支助科

组件造型基于CSS类和一些CSS变量(被称作"设计符"). 要按预期提供每个组件, 您需要将 CSS 文件作为全局样式表纳入您的工程 .

您应该把它们包含在您的 HTML `<head>`数字 :

```html
<!-- tokens.css = Styles to import tokens needed by components -->
<link
  href="<your-relative-path-to-node_modules>/@engie-group/fluid-design-tokens/lib/css/tokens.css"
  rel="stylesheet"
/>
<!-- fluid-design-system.css = Styles of all components -->
<link
  href="<your-relative-path-to-node_modules>/@engie-group/fluid-design-system/lib/fluid-design-system.css"
  rel="stylesheet"
/>
```

或在您的 JavaScript 条目文件中 :

```javascript
import '@engie-group/fluid-design-tokens/css';
import '@engie-group/fluid-design-system/css';
```

或 CSS 条目文件中 :

```css
@import '@engie-group/fluid-design-tokens/css';
@import '@engie-group/fluid-design-system/css';
```

> i️ 我们建议将流体设计系统 CSS 包含在您自己的样式表之前,以避免任何冲突.

#### Javascript

一些组件需要JavaScript代码才能正常工作.

当您的 DOM 实现时, 动态组件需要初始化才能正常工作 .

为此,您必须先用一个将初始化所有组件的全局脚本,或者单独初始化每个组件.

##### 全球初始化

您可以使用自动初始化脚本同时初始化所有组件.

在关闭前, 在页面的末尾添加以下脚本 `</body>` 标签 :

```html
<script
  type="module"
  src="<your-relative-path-to-node_modules>/@engie-group/fluid-design-system/lib/auto-init.js"
></script>
```

##### 个人初始化

您也可以在 JavaScript 中单独初始化每个组件, 通过调用静态 `init` 组件方法.

例如,要初始化您页面上的所有选择组件,您可以使用以下代码:

```javascript
// In a JS file or script tag called right before the end of the body
import { Select } from '@engie-group/fluid-design-system';

Select.init();
```

### CDN 安装

通过CDN可以使用流体设计系统. 这是推荐使用流体的方法,如果您没有构建过程,或者您想在一个工程中快速测试流体.

与国家预防机制的安装一样,您需要将一些CSS和JavaScript文件纳入您的项目。 安装非常相似.

#### 支助科

组件造型基于CSS类和一些CSS变量(被称作"设计符"). 要按预期提供每个组件, 您需要将 CSS 文件作为全局样式表纳入您的工程 .

您应该把它们包含在您的 HTML `<head>`数字 :

```html
<!-- tokens.css = Styles to import tokens needed by components -->
<link
  href="https://cdn.jsdelivr.net/npm/@engie-group/fluid-design-tokens@<VERSION>/lib/css/tokens.css"
  rel="stylesheet"
/>
<!-- fluid-design-system.css = Styles of all components -->
<link
  href="https://cdn.jsdelivr.net/npm/@engie-group/fluid-design-system@<VERSION>/lib/fluid-design-system.css"
  rel="stylesheet"
/>
```

> i️ 我们建议将流体设计系统 CSS 包含在您自己的样式表之前,以避免任何冲突.

#### Javascript

一些组件需要JavaScript代码才能正常工作.

要访问您的代码中的组件, 我们导出一个全局 `NJ` 包含所有组件的常数. 要提供, 您必须在使用任何组件之前设定此脚本 :

```html
<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@engie-group/fluid-design-system@<VERSION>/lib/fluid-design-system.js"
></script>
```

当您的 DOM 实现时, 动态组件需要初始化才能正常工作 .

为此,您必须先用一个将初始化所有组件的全局脚本,或者单独初始化每个组件.

##### 全球初始化

您可以使用自动初始化脚本同时初始化所有组件.

在关闭前, 在页面的末尾添加以下脚本 `</body>` 标签 :

```html
<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@engie-group/fluid-design-system@<VERSION>/lib/auto-init.js"
></script>
```

##### 个人初始化

您也可以在 JavaScript 中单独初始化每个组件, 通过调用静态 `init` 组件方法.

例如,要初始化您页面上的所有选择组件,您可以使用以下代码:

```javascript
// In a JS file or script tag called right before the end of the body
NJ.Select.init();
```

## 文件和使用情况

为了更好地理解这些部件及其用途,我们建议检查我们的 [故事书](https://fluid.design.digital.engie.com/fluid-design-system/index.html) 文档.

对于流体整体文档,你可以检查我们 [流体文档](https://www.engie.design/fluid-design-system/)。 。 。 .

如果您已经正确跟踪安装步骤, 您应该可以在您的工程中使用 Fluid 组件 .

```html
<body>
  <!-- basic Fluid button component -->
  <button type="button" class="nj-btn">Fluid button</button>

  <!-- basic Fluid select component -->
  <div class="nj-form-item nj-form-item--select">
    <div class="nj-form-item__field-wrapper">
      <select class="nj-form-item__field" id="exampleSelect">
        <optgroup label="Group 1">
          <option>Item 1</option>
          <option>Item 2</option>
        </optgroup>
        <optgroup label="Group 2">
          <option>Item 3</option>
          <option>Item 4</option>
          <option>Item 5</option>
        </optgroup>
      </select>
      <label for="exampleSelect" class="nj-form-item__label">Example</label>
      <div class="nj-form-item__trailing">
        <span aria-hidden="true" class="nj-form-item__icon material-icons">keyboard_arrow_down</span>
      </div>
    </div>
  </div>
  <script
    type="module"
    src="<your-relative-path-to-node_modules>/@engie-group/fluid-design-system/lib/auto-init.js"
  ></script>
</body>
```

## 解决问题和专题请求

如果您遇到任何问题, 或者您想要执行任何组件或功能, 请为我们创建一个问题或功能请求 [GitHub 仓库](https://github.com/FluidDesignSystem/fluid-design-system/issues)。 。 。 .

## 常见问题

### @engie-group/fluid-design-system 是什么？

Fluid Design System是ENGIE的开源库,以更有效的方式创建,构建和提供ENGIE数字服务\.注意：该包已被作者标记为弃用——Deprecated and no longer maintained\. Migrate to @engie-group/fluid-design-system-webcomponents

### 如何安装 @engie-group/fluid-design-system？

在项目目录运行 npm install @engie-group/fluid-design-system，或使用 pnpm add / yarn add / bun add。

### @engie-group/fluid-design-system 支持 TypeScript 吗？

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

### @engie-group/fluid-design-system 支持 ESM 还是 CommonJS？

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

### @engie-group/fluid-design-system 可以商用吗？

@engie-group/fluid-design-system 使用 EPL-2\.0 许可。声明的许可为 EPL-2\.0，请阅读许可原文确认使用条件。以上为概括，不构成法律意见，请以许可原文为准。

### @engie-group/fluid-design-system 的下载量有多少？

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

### @engie-group/fluid-design-system 还在维护吗？

最新版本 6\.4\.0 发布于 2026/09/09（2 个月前）；至今共发布 116 个版本，其中过去 12 个月发布了 10 个；首次发布于 2019/11/21。作者已将其标记为弃用，新项目建议寻找替代方案。