# @db-ux/ngx-core-components 中文文档

规范地址：https://npmcn.com/package/%40db-ux/ngx-core-components/

版本：6\.4\.0
npm 元数据更新时间：2026-11-12T10:10:26.413Z
中文译文更新时间：2026-11-12T10:31:33.156Z
软件包许可：Apache-2\.0

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

原始 npm 页面：https://www.npmjs.com/package/%40db-ux/ngx-core-components
原文对照：https://npmcn.com/package/%40db-ux/ngx-core-components/?lang=original
源码仓库：https://github.com/db-ux-design-system/core-web

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

- 包体积（解压后）：4 MB，45 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：3 个
- 首次发布：2025-02-13T13:53:07.800Z
- 最新版本发布：2026-11-12T10:10:25.920Z
- 近 30 天下载量：2570（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：201（近 12 个月 120 个）

## 中文简介

角构件@db-ux/核心构件

## 安装

```sh
npm install @db-ux/ngx-core-components
```

也可以使用：`pnpm add @db-ux/ngx-core-components`、`yarn add @db-ux/ngx-core-components`、`bun add @db-ux/ngx-core-components`

## README

# @db-ux/ngx-核心组件

![Apache 2.0 license badge](https://img.shields.io/badge/License-Apache_2.0-blue.svg) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier) [![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg)](https://conventionalcommits.org/) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://makeapullrequest.com/)

包含所有样式和组件的角库( A) [DB UX 设计系统(技术部件)](https://github.com/db-ux-design-system/core-web)。 。 。 . 我们还提供了有关具体组成部分的更多信息。 这个信息在我们 [设计系统文件](https://design-system.deutschebahn.com/documentation/get-started/)。 。 。 .

## 安装

```shell
pnpm add @db-ux/ngx-core-components @db-ux/core-components @db-ux/core-foundations --save-dev
```

## 型态依赖

导入您 CSS 主文件中的样式 :

```css
/* styles.css */
@layer whitelabel-theme, db-ux;
/* You may want to include another theme here, this is a whitelabel theme! So instead of including the following line of code, please have a look at the DB Theme section */
@import "@db-ux/core-foundations/build/styles/theme/rollup.css"
    layer(whitelabel-theme);

@import "@db-ux/core-components/build/styles/bundle.css" layer(db-ux);
```

### PostCSS 插件( 建议)

我们建议使用 [`@db-ux/core-postcss-plugin`](https://www.npmjs.com/package/@db-ux/core-postcss-plugin) 以减小你的捆绑大小。 它通过解析 CSS 自定义属性来平分 `var()`, (中文(简体) ), `calc()`, (中文(简体) ), `color-mix()`,以及 `light-dark()` ,删除未使用的申报.

```shell
pnpm add @db-ux/core-postcss-plugin --save-dev
```

创建一个 `postcss.config.json` 在您的工程根中 :

```json
{
    "plugins": {
        "@db-ux/core-postcss-plugin": {}
    }
}
```

> 角 CLI (英语:`@angular/build:application`)只支持基于 JSON 的 PostCSS 配置和加载插件 `require()`两者都起作用 `ng build` 财务报告和审定财务报表 `ng serve`。 。 。 .

📖 **[学习更多关于 `@db-ux/core-postcss-plugin` 节点软件包](https://www.npmjs.com/package/@db-ux/core-postcss-plugin)**

### 解决资产

当前默认开发配置 `angular.json` 不使用输出散列。 这可能造成一个装入字体的问题 。 看着 [这个](https://github.com/angular/angular-cli/issues/26347) 更多信息.

作为解决办法,添加 `"outputHashing": "media"` 改为 `configurations/development` 内 `angular.json`。 。 。 .

### DB 主题

若您正在为 Deutsche Bahn 建立一个网站或应用程序,您还需通过 [`@db-ux/db-theme`](https://www.npmjs.com/package/@db-ux/db-theme) 节点包(甚至也可以作为内源节点包提供,如该包所描述的README).

## 使用量

```ts
// app.component.ts
import { DBButton } from '@db-ux/ngx-core-components';

@Component({
    // ...
    imports: [
        // ...,
        DBButton
    ],
    standalone: true
    // ...
})
```

```html
<!-- app.component.html -->
<db-button variant="brand">Button</db-button>
```

### 活动

在 Angular 有三种方式使用事件:

**[纳克-摩尔](https://angular.dev/api/forms/NgModel)**

```html
<db-input
    label="Inputfield"
    name="input-name"
    [(ngModel)]="inputModel"
></db-input>
```

**[窗体控制](https://angular.dev/api/forms/FormControl)**

```html
<db-input
    label="Inputfield"
    name="input-name"
    [formControl]="inputControl"
></db-input>
```

**[变动](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event)**

```html
<db-input
    label="Inputfield"
    name="input-name"
    (change)="inputModel = $event.target.value"
></db-input>
```

## AI 代理支持

对于使用GitHub Copilot或Amazon Q等AI编码助理的开发者,我们提供 [`@db-ux/agent-cli`](https://www.npmjs.com/package/@db-ux/agent-cli) 自动将 DB UX 设计系统文档添加到您的仓库的工具.

### 快速启动

在您的仓库中运行此命令 :

```shell
npx @db-ux/agent-cli
```

这将创建或更新 `.github/copilot-instructions.md` 根据您安装的组件文档 `@db-ux` 软件包,帮助AI代理商提供更好的建议.

📖 **[学习更多关于 `@db-ux/agent-cli` 节点软件包](https://www.npmjs.com/package/@db-ux/agent-cli)**

## 代码质量

为了在您的 Angular 模板中强制正确使用 DB UX 设计系统组件,我们提供 [`@db-ux/core-eslint-plugin`](https://www.npmjs.com/package/@db-ux/core-eslint-plugin) ESLint 插件 .

### 安装

```shell
pnpm add eslint @db-ux/core-eslint-plugin @angular-eslint/template-parser --save-dev
```

### 设置

```js
// eslint.config.js
import dbUx from "@db-ux/core-eslint-plugin";
import angularTemplateParser from "@angular-eslint/template-parser";

export default [
    {
        files: ["**/*.html"],
        languageOptions: {
            parser: angularTemplateParser
        },
        plugins: {
            "db-ux": dbUx
        },
        rules: dbUx.configs.recommended.rules
    }
];
```

📖 **[学习更多关于 `@db-ux/core-eslint-plugin` 节点软件包](https://www.npmjs.com/package/@db-ux/core-eslint-plugin)**

## 样式林

为了在您的 CSS/ SCSS 中验证对 DB UX 设计系统符号的正确使用, 请使用 [`@db-ux/core-stylelint`](https://www.npmjs.com/package/@db-ux/core-stylelint) 插件 .

### 安装

```shell
pnpm add stylelint @db-ux/core-stylelint --save-dev
```

### 设置

添加到您的 `.stylelintrc.json`数字 :

```json
{
    "plugins": ["@db-ux/core-stylelint"],
    "rules": {
        "db-ux/use-spacings": [true],
        "db-ux/use-sizing": [true],
        "db-ux/use-border-width": [true],
        "db-ux/use-border-radius": [true],
        "db-ux/use-border-color": [true]
    }
}
```

📖 **[学习更多关于 `@db-ux/core-stylelint` 节点软件包](https://www.npmjs.com/package/@db-ux/core-stylelint)**

## 德国Bahn品牌

由于我们想在数字化旅程中完全支持我们的用户和客户,即使使用我们提供的这个产品代码,Deutsche Bahn品牌和商标的使用也有明确的指导方针和限制; Deutsche Bahn完全保留了对Deutsche Bahn品牌的所有权利,尽管我们正在提供DB UX Design System产品的代码,根据Apache 2.0许可证可以自由使用并发布. 请看看我们的品牌门户 [https://marketingportal.extranet.deutschebahn.com/ 页面存档备份,存于互联网档案馆](https://marketingportal.extranet.deutschebahn.com/) 就任何品牌问题与谁联系.

对于德国Bahn网站和应用程序以外的任何用途,你不得使用任何德国Bahn品牌和 设计资产以及受保护的特征和商标,用于不包括DB主题.

## 捐款

发言非常受欢迎,请参看 [捐款指南](https://github.com/db-ux-design-system/core-web/blob/main/CONTRIBUTING.md)。 。 。 .

## 行为守则

作为成员、贡献者和领导人,我们保证参与我们的工作 人人无骚扰的体验 [《公约》的行为守则](https://github.com/db-ux-design-system/.github/blob/main/CODE-OF-CONDUCT.md)。 。 。 .

## 许可证

这个项目的许可证根据 [阿帕奇 - 2.0](https://npmcn.com/package/%40db-ux/ngx-core-components/LICENSE)。 。 。 .

## 常见问题

### @db-ux/ngx-core-components 是什么？

角构件@db-ux/核心构件

### 如何安装 @db-ux/ngx-core-components？

在项目目录运行 npm install @db-ux/ngx-core-components，或使用 pnpm add / yarn add / bun add。

### @db-ux/ngx-core-components 支持 TypeScript 吗？

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

### @db-ux/ngx-core-components 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @db-ux/ngx-core-components 可以商用吗？

@db-ux/ngx-core-components 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @db-ux/ngx-core-components 的下载量有多少？

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

### @db-ux/ngx-core-components 还在维护吗？

最新版本 6\.4\.0 发布于 2026/11/12（今天）；至今共发布 201 个版本，其中过去 12 个月发布了 120 个；首次发布于 2025/02/13。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。