@edugouvfr/ngx-dsfr - 读取

NgxDsfr 最不端口的界面 法语设计体系。 。 。 .

教育部长发展委员会 格勒诺布尔国立大学和全国试点大学“Socle Numérique”(SOCLE1)和“服务 numériques”(SN2) 教育部.

相互依存

免费服务 dSFR版本 1.15。 。 。 .

版本角

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 文档 倒出信息来.

• 初始化 DSFR dans votre projet avec la version 兼容并接受 se modelités d'utilation

  npm create @gouvfr/dsfr -- --dsfr-version=1.15.3
  

• (原始内容存档于2019-09-29) (英语). Instituter la dédependance vers le module NPU dans votre projet Angular

  npm install @edugouvfr/ngx-dsfr
  

• DSFR 法语区 angular.json 尔 project.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。 。 。 .

实例 : 主要企业

复合物添加网

提案编号 混凝土 d'扩展 aux éléments officiels du DSFR :多选择,自动完成等. Ce 软件包 ngx-dsfr-ext (英语) (原始内容存档于2013-10-12) (英语). pour but de couvrir les besoins fonctionnels qui ne sont pas incore couverts par le DSFR. * 国防和安全部队现有人员、尊重法语技术和设计专家.

利用

• Dans votre 堆肥,进口商 que souhaitez 用户:

  @Component({
    selector: 'app-component',
    imports: [DsfrModalComponent, DsfrButtonComponent],
  })
  export class MonComposant implements OnInit {}
  

• Puis user le composant dans votre 模板 html : (中文)

  <dsfr-button>...</dsfr-button>
  

文档

校对:Soup https://foad.phm.educus.gouv.fr/edugouvfr/ngx-dsfr/ 互联网档案馆的存檔,存档日期2014-12-22

文献资料:

• - 倒马克
• 页: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

职能

全局配置

利用统计方法实现全球机动性配置的可能定义 forRoot du 模块 DsfrConfigModule。 。 。 .

举例来说,在图象图上最贴出全球化学图的图示 说明DSFR, procédez come suit:

@NgModule({
imports: [
    DsfrConfigModule.forRoot({
      artworkDirPath: 'custom/path/to/artwork',
    }),
]
})

建设出口者协会 angular.json 数字 :

"assets": [
  {
    "input": "node_modules/@gouvfr/dsfr/dist/artwork",
    "glob": "**/*",
    "output": "custom/path/to/artwork"
  }
],

国际化

法国土著和英国的诽谤行为. 改变堆肥的习惯 dsfr-translate 与管道 dsfrI18n。 。 。 .

尽可能增加附加费 以新郎为主, 参见文件dédiée

中美洲问题

支持妇女联盟 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 冰岛

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 重混图标

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-*。 。 。 . 实例:

.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混凝土文件

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:

• (输入)

说明: <dsfr-link link="#bottom" label="Bas de page"></dsfr-link>

• 因此通过非点注入(ng-content) prévu à cet effet:

说明: <dsfr-link link="#bottom">Bas de page</dsfr-link>

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。 。 。 .

Pour rappel, l'usage du DSFR est réservé aux sites de l'État, se référer aux ref. CGU 德军。 。 。 .

需求者 une évolution ou signal une anomalie(英语:

(原始内容存档于2019-10-21). Équipes internes Éduc. 纳特.

• 通行证 吉特拉堡问题

公共服务部

• 通行证 吉特拉·米姆-利布雷问题

联系人

• 发展评估传播清单 [email protected]. education.gouv.fr (英语)
• 章节
• 最关键 (Interne form Éduc. Nat. ) (内地伪造教育

Feuille de 路线

• 2026年:

  • 田地后勤系统
  • 改善会议日程
  • 缩略语(例如抽屉)

• 2027年: DSFR的V2被冲入

联系人

尔后 贡献指南。 。 。 .