# @edugouvfr/ngx-dsfr 中文文档
规范地址：https://npmcn.com/package/%40edugouvfr/ngx-dsfr/
版本：1\.20\.1
npm 元数据更新时间：2026-10-23T08:28:11.116Z
中文译文更新时间：2026-11-13T07:32:53.630Z
软件包许可：EUPL-1\.2
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40edugouvfr/ngx-dsfr
原文对照：https://npmcn.com/package/%40edugouvfr/ngx-dsfr/?lang=original
项目主页：https://foad.phm.education.gouv.fr/edugouvfr/ngx-dsfr/
源码仓库：https://gitlab.mim-libre.fr/men/transverse/dsmen/ngx-dsfr-components
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：2.9 MB，12 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：^20\.19\.0 \|\| ^22\.12\.0 \|\| ^24\.0\.0
- 运行依赖：1 个
- peer 依赖：rxjs ^6 \|\| ^7，uuid \>=13\.0\.0，args-parser \>=1\.3\.0，@gouvfr/dsfr ~1\.15\.0，@angular/core \>=20\.3，@angular/forms \>=20\.3，@angular/common \>=20\.3
- 首次发布：2023-04-24T10:11:47.182Z
- 最新版本发布：2026-10-23T08:28:10.854Z
- 近 30 天下载量：10465（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：96（近 12 个月 17 个）
## 中文简介
(原始内容存档于2018-10-21). NgxDsfr est unportage Angular des éléments d'interface du système de Design de l'Éttal Français (DSFR).
## 安装
```sh
npm install @edugouvfr/ngx-dsfr
```
也可以使用：`pnpm add @edugouvfr/ngx-dsfr`、`yarn add @edugouvfr/ngx-dsfr`、`bun add @edugouvfr/ngx-dsfr`
## README
# @edugouvfr/ngx-dsfr - 读取
`NgxDsfr` 最不端口的界面 [法语设计体系](https://www.systeme-de-design.gouv.fr/)。 。 。 .
教育部长发展委员会 格勒诺布尔国立大学和全国试点大学“Socle Numérique”(SOCLE1)和“服务 numériques”(SN2) 教育部.
## 相互依存
免费服务 [dSFR版本 1.15](https://github.com/GouvernementFR/dsfr/releases/tag/v1.15.0)。 。 。 .
## 版本角
20 mais notre bibliothèque est 兼容 20 à 22.
## 安装
\* \*\* 部分内容为: `1.15` 页:1 `@gouvfr/dsfr`, DSFR的 " réglementaire du DSFR " 义务, " réglementaire " 要求 " cGU pour chaque projet " 更有效.
版图 `1.20` 页:1 `ngx-dsfr` intégrant cette版本DSFR, la librairie ne fennit 外加DSFRcome dépendance 中转. `@gouvfr/dsfr` 离奇无比 `peerDependency` 并安装 **说明**(原始内容存档于2018-10-12). afin de pouvoir vicer les CGU de celle-ci. 万岁 [dSFR 文档](https://www.systeme-de-design.gouv.fr/version-courante/fr/premiers-pas/vous-etes-developpeur/prise-en-main) 倒出信息来.
- 初始化 DSFR dans votre projet avec la version 兼容并接受 se modelités d'utilation
```bash
npm create @gouvfr/dsfr -- --dsfr-version=1.15.3
```
- (原始内容存档于2019-09-29) (英语). Instituter la dédependance vers le module NPU dans votre projet Angular
```bash
npm install @edugouvfr/ngx-dsfr
```
- DSFR 法语区 `angular.json` 尔 `project.json` 数字 :
```json
"styles": [
"./node_modules/@gouvfr/dsfr/dist/dsfr/dsfr.main.min.css",
"./node_modules/@gouvfr/dsfr/dist/utility/utility.main.min.css",
"projects/app-demo/src/styles.scss"
],
"scripts": [
"./node_modules/@gouvfr/dsfr/dist/dsfr/dsfr.module.js"
]
```
- 标记 `index.html`。 。 。 .
_实例 : [主要企业](https://www.systeme-de-design.gouv.fr/version-courante/fr/premiers-pas/vous-etes-developpeur/prise-en-main#le-html)_
## 复合物添加网
提案编号 [混凝土 d'扩展](https://foad.phm.education.gouv.fr/edugouvfr/ngx-dsfr-ext/latest) aux éléments officiels du DSFR :多选择,自动完成等. Ce 软件包 [ngx-dsfr-ext (英语)](https://foad.phm.education.gouv.fr/edugouvfr/ngx-dsfr-ext/latest) (原始内容存档于2013-10-12) (英语). pour but de couvrir les besoins fonctionnels qui ne sont pas incore couverts par le DSFR. \* 国防和安全部队现有人员、尊重法语技术和设计专家.
## 利用
- Dans votre 堆肥,进口商 que souhaitez 用户:
```typescript
@Component({
selector: 'app-component',
imports: [DsfrModalComponent, DsfrButtonComponent],
})
export class MonComposant implements OnInit {}
```
- Puis user le composant dans votre 模板 html : (中文)
```html
...
```
## 文档
校对:Soup [https://foad.phm.educus.gouv.fr/edugouvfr/ngx-dsfr/ 互联网档案馆的存檔,存档日期2014-12-22](https://foad.phm.education.gouv.fr/edugouvfr/ngx-dsfr/)
文献资料:
- \- 倒马克
- 页:1
- 注意点
- \* 访问比利特
## 代码源
Le code sour de cette bibliothèque de composants est publié sur mim-libre 代码来源 :
[https://gitlab.mim-libre.fr/men/transverse/dsmen/ngx-dsfr-组件.git](https://gitlab.mim-libre.fr/men/transverse/dsmen/ngx-dsfr-components.git)
## 职能
### 全局配置
利用统计方法实现全球机动性配置的可能定义 `forRoot` du 模块 `DsfrConfigModule`。 。 。 .
举例来说,在图象图上最贴出全球化学图的图示 说明DSFR, procédez come suit:
```typescript
@NgModule({
imports: [
DsfrConfigModule.forRoot({
artworkDirPath: 'custom/path/to/artwork',
}),
]
})
```
建设出口者协会 `angular.json` 数字 :
```json
"assets": [
{
"input": "node_modules/@gouvfr/dsfr/dist/artwork",
"glob": "**/*",
"output": "custom/path/to/artwork"
}
],
```
### 国际化
法国土著和英国的诽谤行为. 改变堆肥的习惯 `dsfr-translate` 与管道 `dsfrI18n`。 。 。 .
尽可能增加附加费 以新郎为主, [参见文件dédiée](https://npmcn.com/docs/introduction-internationalisation--docs)
### 中美洲问题
支持妇女联盟 `icon` dSFR, 实例 `fr-icon-home-4-fill`。 。 。 . (原始内容存档于2013-10-12). Les icônes du DSFR sont inclules dans le projet and doc disponsibilitions自发. DSFR最不负责任的记录 [DSFR 冰岛](https://www.systeme-de-design.gouv.fr/version-courante/fr/fondamentaux/icone)
Cas de nécessté d'ajouter d'autres icônes, il est conseillé de se conseillé de se contracter aux icônes de la librairie [重混图标](https://remixicon.com/)
I'n's sistue pas pour l'instant de manière d'ajouter toute la librairie d'icônes en une fois, pour vector le style system le spector le system 页面存档备份,存于互联网档案馆,存于互联网档案馆 `DSFR` (一) 法律、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政、行政等)
- 飞行器 `.svg` 对应 à l'icône (函数) `Copy SVG` sur RemixIcon) (英语)
- 荣誉勋章 `CSS` 对等、对等和对等 `fr-icon-*`。 。 。 . 实例:
```CSS
.fr-icon-play::before,
.fr-icon-play::after {
-webkit-mask-image: url('../shared/icons/carousel/play.svg');
mask-image: url('../shared/icons/carousel/play.svg');
}
```
教育课程 `fr-icon-*` 告诉 que `fr-btn--account` sont des raccourcis d'affichage (conent ane classe spécifique, une position等). (原始内容存档于2013-10-12). Si vous les usedez vous ne pourrez dosc pas forcément suprecer les autres propriétés comme la position.
### 留置权的行使
(原始内容存档于2019-09-25) (中文(中国大陆) ). Sures composents permetent de naviguer vers d'autres pages web. ou d'autres parties de votre site/application web. Pour obtenir un hyperlien "classique" (航海外行) avec une URL (absolue ou relative) 使用 la propriété `link` 温和.
Si vous souhaitez plutôt exécuter une najular (通过 le Router) voici 评论员:
#### 通过指令导航gérée `routerLink` (西班牙文) (西班牙文)
- 职业介绍所 `routePath` au niveau du composant (ou) (法语) `routerLink` (法语)
- Cela va intégrer une 指令 `routerLink` 互通导航权
- `routerLinkExtras` (原始内容存档于2019-06-26) (英语). vous permet d'ajouter les paramètres optenels teles les questionParams
- 使用非曲直的混合体 `route`。 。 。 .
#### 通过 Gérée 程序配置 `router#navigate`
- 职业介绍所 `route` 混凝土输入
- Mettez - vous à l'écoute de l'output (英语:Mettez - vous à l'écoute de l'Outut) 互联网档案馆的存檔,存档日期2013-12-02 `routeSelect`
- 莱韦内特 `(routeSelect)` 最高经济等级 `route` 和n'tifn'est pas prapagé
- Vous Pouvez alors 执行人 `router#navigate`
[参见Lien混凝土文件](https://npmcn.com/docs/link--docs)
### Propriétés 和 时间档
Dans de nombreux composants, il vous est de fournir sures contenus de deux façons : (原始内容存档于2018-09-29). Dans de nombreux composants, il vous est de fenir sures contenus de deux façons:
- (输入)
说明: ``
- 因此通过非点注入(ng-content) prévu à cet effet:
说明: `Bas de page`
s'est l'put qui sera usedé en presentité. 互联网档案馆的存檔,存档日期2013-12-04.
L'input ne 支持 pas le 格式 HTML, si vous avez besoin de formater votre contenu en usingant des balises HTML , i vous avez besoin de formaters votre contenu 使用 HTML 格式 债务支付通过人
支持cette possibilité:
- 窗体: 复选框、 输入、 选择、 切换、 收音机( legend)
- 手风琴( 内容, 标题)
- 表格(标题)
- 平板 (描述)
## 许可证与使用权
许可证 [EUPL 1.2](https://eupl.eu/1.2/fr/)。 。 。 .
Pour rappel, l'usage du DSFR est réservé aux sites de l'État, se référer aux ref. [CGU 德军](https://github.com/GouvernementFR/dsfr/blob/main/doc/legal/cgu.md)。 。 。 .
## 需求者 une évolution ou signal une anomalie(英语:
#### (原始内容存档于2019-10-21). Équipes internes Éduc. 纳特.
- 通行证 [吉特拉堡问题](https://gitlab.forge.education.gouv.fr/dsmen/components/ngx-dsfr-components/-/issues)
#### 公共服务部
- 通行证 [吉特拉·米姆-利布雷问题](https://gitlab.mim-libre.fr/publication-codes-men/transverse/ngx-dsfr-components/-/issues)
## 联系人
- 发展评估传播清单 [dsmen-core@ldiff.forge. education.gouv.fr (英语)](mailto:dsmen-core@ldiff.forge.education.gouv.fr)
- [章节](https://tchap.gouv.fr/#/room/#DSFRAngularsU1F1Lhury7:agent.education.tchap.gouv.fr)
- [最关键](https://mattermost.forge.education.gouv.fr/tyforge/channels/ngx-dsfr-components) (Interne form Éduc. Nat. ) (内地伪造教育
## Feuille de 路线
- 2026年:
- 田地后勤系统
- 改善会议日程
- 缩略语(例如抽屉)
- 2027年: DSFR的V2被冲入
## 联系人
尔后 [贡献指南](https://npmcn.com/package/%40edugouvfr/ngx-dsfr/CONTRIBUTING.md)。 。 。 .
## 常见问题
### @edugouvfr/ngx-dsfr 是什么？
\(原始内容存档于2018-10-21\)\. NgxDsfr est unportage Angular des éléments d'interface du système de Design de l'Éttal Français \(DSFR\)\.
### 如何安装 @edugouvfr/ngx-dsfr？
在项目目录运行 npm install @edugouvfr/ngx-dsfr，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：rxjs（^6 \|\| ^7）、uuid（\>=13\.0\.0）、args-parser（\>=1\.3\.0）、@gouvfr/dsfr（~1\.15\.0）、@angular/core（\>=20\.3）、@angular/forms（\>=20\.3）、@angular/common（\>=20\.3）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。
### @edugouvfr/ngx-dsfr 支持 TypeScript 吗？
支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。
### @edugouvfr/ngx-dsfr 支持 ESM 还是 CommonJS？
同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。
### @edugouvfr/ngx-dsfr 需要什么版本的 Node\.js？
package\.json 的 engines 字段要求 Node\.js ^20\.19\.0 \|\| ^22\.12\.0 \|\| ^24\.0\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。
### @edugouvfr/ngx-dsfr 可以商用吗？
@edugouvfr/ngx-dsfr 使用 EUPL-1\.2 许可。声明的许可为 EUPL-1\.2，请阅读许可原文确认使用条件。以上为概括，不构成法律意见，请以许可原文为准。
### @edugouvfr/ngx-dsfr 的下载量有多少？
根据 npm 官方下载统计，@edugouvfr/ngx-dsfr 在 2026/10/13 – 2026/11/11 这 30 天内被下载 10,465 次，日均约 349 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @edugouvfr/ngx-dsfr 还在维护吗？
最新版本 1\.20\.1 发布于 2026/10/23（21 天前）；至今共发布 96 个版本，其中过去 12 个月发布了 17 个；首次发布于 2023/04/24。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。