# @cdssnc/gcds-components 中文文档

规范地址：https://npmcn.com/package/%40cdssnc/gcds-components/

版本：0\.47\.0
npm 元数据更新时间：2026-02-12T19:30:25.214Z
中文译文更新时间：2026-11-09T13:32:30.394Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40cdssnc/gcds-components
原文对照：https://npmcn.com/package/%40cdssnc/gcds-components/?lang=original
项目主页：https://design-system.alpha.canada.ca/
源码仓库：https://github.com/cds-snc/gcds-components

弃用说明：⚠️ This package has moved to @gcds-core/components and will no longer receive updates\. Update your dependency to continue receiving improvements\.

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

- 包体积（解压后）：11.7 MB，600 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：5 个
- 首次发布：2023-02-10T22:15:56.402Z
- 最新版本发布：2026-01-20T18:04:41.183Z
- 近 30 天下载量：2522（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：66（近 12 个月 4 个）

## 中文简介

GCDS的网络组件

## 安装

```sh
npm install @cdssnc/gcds-components
```

也可以使用：`pnpm add @cdssnc/gcds-components`、`yarn add @cdssnc/gcds-components`、`bun add @cdssnc/gcds-components`

## README

[(原始内容存档于2018-10-21). La version française suit.](https://npmcn.com/package/%40cdssnc/gcds-components/#readme-composants-de-syst%C3%A8me-de-design-gc)

# GC 设计系统组件

直接使用HTML中的GC Design System网络组件. 这些组件具有框架不可知性,行为与原生的HTML元素相似.

使用此选项用于:

-   静态场地
-   内容管理系统平台
-   节点.js
-   爪哇语
-   丝绒
-   . NET 网络

如果您正在使用 React、 Angular 或 Vue 框架, 请浏览 [安装页面](https://design-system.alpha.canada.ca/en/get-started/develop/) 为特定框架的选项.

## 文档

您可以在 [页:1](https://design-system.alpha.canada.ca/)。 。 。 .

## Npm 安装指令

### 1\. 安装软件包

导航您的工程根文件夹并运行以下命令:

```js
npm install @cdssnc/gcds-components
```

### 2\. 将GC设计系统纳入您的项目

添加以下内容: `link` 标签 `head` 您的标签 `HTML` 装入GC 设计系统的文件 :

```html
<!-- GC Design System -->
<link
  rel="stylesheet"
  href="/node_modules/@cdssnc/gcds-components/dist/gcds/gcds.css"
/>
<script
  type="module"
  src="/node_modules/@cdssnc/gcds-components/dist/gcds/gcds.esm.js"
></script>
```

### 3\. 开始建设

一旦安装了设计系统,就开始建设! 浏览我们可用的 [组件](https://design-system.alpha.canada.ca/en/components/) 财务报告和审定财务报表 [模板](https://design-system.alpha.canada.ca/en/page-templates/) 将您需要的代码调入您的项目.

## CDN 安装指令

### 1\. 选择如何接收更新

您有两个选项可以从 CDN 接收更新:

1.  使用被绑定的版本实现稳定性(建议).
2.  使用 QQlatest 获取自动更新 .

#### a. 使用固定版本(建议)

这项计划的稳定性和可预测性.

添加以下代码到 `head` 您的标签 `HTML` 装入GC设计系统的文件。 确保当前版本被列出.

```html
<!-- GC Design System -->
<link
  rel="stylesheet"
  href="https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-components@<version-number>/dist/gcds/gcds.css"
/>
<script
  type="module"
  src="https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-components@<version-number>/dist/gcds/gcds.esm.js"
></script>
```

说明: `<script type="module">` 需要服务器正常加载 。 如果在当地开发,则使用 `<script nomodule>`。 。 。 .

##### 前进

代码将保持不变,直到您手动更新CDN URL中的版本. 这是生产环境的理想.

检查新 [GC 设计系统版本](https://github.com/cds-snc/gcds-components/blob/main/CHANGELOG.md) 定期更新最新被绑定的版本.

#### 使用 `@latest` 版本

使用 `@latest` 标记可以将最新版本的GC设计系统拖入您的项目。 将此标签替换为版本编号.

虽然它消除了手动更新版本的需要,但随着新版本被自动应用,它增加了在代码库中引入中断更改的风险.

### 2\. 开始建设

一旦安装了设计系统,就开始建设! 浏览我们可用的 [组件](https://design-system.alpha.canada.ca/en/components/) 财务报告和审定财务报表 [模板](https://design-system.alpha.canada.ca/en/page-templates/) 将您需要的代码调入您的项目.

## 支助框架

Gcds-组件库在多个框架中工作.

### 反应

请参考 [GC 设计系统组件 — react](https://npmcn.com/package/%40cdssnc/react/README.md)

### 角质

请参考 [GC 设计系统组件 - 角](https://npmcn.com/package/%40cdssnc/angular/README.md)

### 阴道

请参考 [GC 设计系统组件 - Vue](https://npmcn.com/package/%40cdssnc/vue/README.md)

## 如何捐款

如果您有兴趣为GC设计系统组件做出贡献,请阅读我们 [提供指南](https://github.com/cds-snc/gcds-components/blob/main/CONTRIBUTING.md)。 。 。 .

## 许可证

代码根据 [MIT 许可证](https://github.com/cds-snc/gcds-components/blob/main/LICENSE)。 。 。 .

* * *

# 设计材料

Utilisez les composants Web de Système de design GC Dans un projet HTML. 互联网档案馆的存檔,存档日期2013-12-21. 互联网档案馆的存檔,存档日期2014-12-21. Ces composants s ' adaptent à tout cadriciel et ont un comportment similaire aux éléments HTML natifs. 中国植物物种信息数据库.

Utilisez cette 方案:

-   站点统计
-   CMS 模板
-   节点.js
-   爪哇语
-   丝绒
-   . NET 网络

女干部,女演员,女演员 [安装页](https://systeme-design.alpha.canada.ca/fr/demarrer/developpement/) 向优秀干部提供选择.

## 文档

建筑设计图书 [https://systeme-design.alpha.canada.ca/ 互联网档案馆的存檔,存档日期2014-12-21](https://systeme-design.alpha.canada.ca/)。 。 。 .

## 安装指令

### 1\. 平板电脑安装器

Navíguez vers le folm racine de votre projet and exécute la commande suvante : (原始内容存档于2019-09-29)

```js
npm install @cdssnc/gcds-components
```

### 2\. 设计系统

阿胡特斯-瓦利塞 `link` 提炼法 `head` 双发 `HTML` système de design GC :

```html
<!-- GC Design System -->
<link
  rel="stylesheet"
  href="/node_modules/@cdssnc/gcds-components/dist/gcds/gcds.css"
/>
<script
  type="module"
  src="/node_modules/@cdssnc/gcds-components/dist/gcds/gcds.esm.js"
></script>
```

### 3\. 开始培训

(原始内容存档于2013-10-12) (英语). Une fois le système de design s安装, startz à créer!. 纸牌号码 [堆肥剂](https://systeme-design.alpha.canada.ca/fr/composants/) 页:1 [摩尔语](https://systeme-design.alpha.canada.ca/fr/modeles-de-page/) 倒出你的代码 不vous avez besoin 倒出votre projet.

## 安装指令

### 1\. 选民评论

国家卫生局:

1.  Utiliser la version épinglée pour la surbilité(再指挥).
2.  (原始内容存档于2013-10-12). Utiliser Qintest " pour obtenir des misses à jour automatiques.

#### a. Utiliser la épinglée (再指挥)

支持稳定与和平总统方案.

Ajoutez el code survant à la balise (法语) `head` 双发 `HTML` système de design GC. 倒装充电器(英语:Système de design GC. Assurez-vous d 'indiquer la version actuelle. 中国植物物种信息数据库.

```html
<!-- GC Système de design -->
<link
  rel="stylesheet"
  href="https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-components@<version-number>/dist/gcds/gcds.css"
/>
<script
  type="module"
  src="https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-components@<version-number>/dist/gcds/gcds.esm.js"
></script>
```

雷马克: `<script type="module">` {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}我就是这个意思 促进地方发展,利用 `<script nomodule>`。 。 。 .

##### 自定义

(原始内容存档于2013-10-12). Le code resestera inchangé juqué ce que vous mettiez à jour manuellement la version dans les URL CDN, sce qui est idéal pour les environments de production.

" 和平与正义 " 组织 [设计新版本](https://github.com/cds-snc/gcds-components/blob/main/CHANGELOG.md#journal-des-modifications) afin de metre à jour la dernière version épinglée. 中国植物物种信息数据库.

#### b. Utiliser la 版本 `@latest` (法语版)

乌蒂利塞兹- la balise `@latest` (原始内容存档于2018-03-26) (英语). Prour insérer la plus récente version de Système de design GC dans votre projet. (原始内容存档于2013-10-10). Remplacez le numéro de version par cette balise.

翻译:Bien que cette approche vous évite la mise à jour manuelle des version, elle court le risque d'indroduire des reformation qui entraînent une break de compatibilité avec le code base à mesure que à les enneu se version sont automatiquement appliquees. 互联网档案馆的存檔,存档日期:2014-12-03-04.

### 2\. 开始培训

(原始内容存档于2013-10-12) (英语). Une fois le système de design s安装, startz à créer!. 纸牌号码 [堆肥剂](https://systeme-design.alpha.canada.ca/fr/composants/) 页:1 [摩尔语](https://systeme-design.alpha.canada.ca/fr/modeles-de-page/) 倒出你的代码 不vous avez besoin 倒出votre projet.

## 正在申请的干部

(原始内容存档于2013-10-12). La bibliothèque gcds - 组件 fonctionne sous pliesieurs cults d'application.

### 反应

韦伊列斯·费尔南德斯 [GC-反应](https://npmcn.com/package/%40cdssnc/react/README.md)

### 角质

韦伊列斯·费尔南德斯 [GC-Angular 设计成像器](https://npmcn.com/package/%40cdssnc/angular/README.md)

### 阴道

韦伊列斯·费尔南德斯 [建筑设计师](https://npmcn.com/package/%40cdssnc/vue/README.md)

## Apportez votre 捐款

Si vous souhaitez contribuer aux unités de style de Système de design GC, veuillez lire nos (法语) (法语) [捐款指导](https://github.com/cds-snc/gcds-components/blob/main/CONTRIBUTING.md)。 。 。 .

## 许可证

宪法法典 [麻省理工学院许可证](https://github.com/cds-snc/gcds-components/blob/main/LICENSE) (安格拉斯语).

## 常见问题

### @cdssnc/gcds-components 是什么？

GCDS的网络组件注意：该包已被作者标记为弃用——⚠️ This package has moved to @gcds-core/components and will no longer receive updates\. Update your dependency to continue receiving improvements\.

### 如何安装 @cdssnc/gcds-components？

在项目目录运行 npm install @cdssnc/gcds-components，或使用 pnpm add / yarn add / bun add。

### @cdssnc/gcds-components 支持 TypeScript 吗？

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

### @cdssnc/gcds-components 支持 ESM 还是 CommonJS？

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

### @cdssnc/gcds-components 可以商用吗？

@cdssnc/gcds-components 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @cdssnc/gcds-components 的下载量有多少？

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

### @cdssnc/gcds-components 还在维护吗？

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