# @db-ui/core 中文文档

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

版本：3\.3\.7
npm 元数据更新时间：2026-02-18T10:38:29.977Z
中文译文更新时间：2026-11-12T03:32:26.438Z
软件包许可：Apache-2\.0

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

原始 npm 页面：https://www.npmjs.com/package/%40db-ui/core
原文对照：https://npmcn.com/package/%40db-ui/core/?lang=original
项目主页：https://db-ui.github.io/core/
源码仓库：https://github.com/db-ui/core

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

- 包体积（解压后）：7.2 MB，3645 个文件
- TypeScript 类型：未声明
- 运行依赖：2 个
- 首次发布：2022-05-06T16:32:11.882Z
- 最新版本发布：2026-02-18T10:38:29.655Z
- 近 30 天下载量：3087（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：91（近 12 个月 1 个）

## 中文简介

技术前端实施DB UX设计系统.

## 安装

```sh
npm install @db-ui/core
```

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

## README

![](https://npmcn.com/package/%40db-ui/core/source/samples/images/header_image_0.guetzli.jpg)

# DB UI 核心

![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) [![XO code style](https://img.shields.io/badge/code_style-XO-5ed9c7.svg)](https://github.com/xojs/xo) [![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg)](https://conventionalcommits.org/) [![@db-ui/core on Npmjs](https://img.shields.io/npm/v/@db-ui/core.svg?color=rgb%28237%2C%2028%2C%2036%29 "npm version")](https://npmjs.com/package/@db-ui/core "DB UI Core – on NPM") ![Based on DB UX Design System version 2](https://img.shields.io/badge/Based%20on-DB%20Design%20System-d7dce1.svg) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com/) [![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.0-4baaaa.svg)](https://npmcn.com/package/%40db-ui/core/CODE-OF-CONDUCT.md)

> \[大 我们发布了新的稳定版本 [DB UX 设计系统 v3](https://github.com/db-ux-design-system/core-web),它是这代DB设计系统的后继. 特别是对于新项目,我们强烈建议: [DB UX 设计系统 v3](https://github.com/db-ux-design-system/core-web)。 。 。 . 新版本有一些巨大的好处和优化,特别是在无障碍测试,进一步更好的框架支持和持续开发方面.  
> 请注意,从现在开始我们不会提供任何新的功能,只有bug修正直到2026年底的EOL.

> \[尖叫声\] 我们试过了 [快速迁移到较新的SCSS语法例如. `@use` 而不是现在的堕落 `@import`](https://github.com/db-ui/core/issues/994)这似乎比预期的要复杂. 你可能会在控制台上遇到一些警告 当使用SASS 和我们的包 `@import` 用途。 如果你想防止这些,你也许也想评估一下 迁移到我们更新的 DB UX 设计系统: [https://github.com/db-ux-design-system/core-web (中文(简体) )](https://github.com/db-ux-design-system/core-web)

DB Personenverkehr 和 DB Systel 合并了网络设计系统 [使用 DB UX 设计系统 v2](https://marketingportal.extranet.deutschebahn.com/marketingportal/Design-Anwendungen/db-ux-design-system/version-2/Components) 作为他们的接班人。 我们的目标是提供基于 [DB "Moderne Ikone" (英语:Moderne Ikone (film))](https://marketingportal.extranet.deutschebahn.com/marketingportal/Marke-und-Design#) 用于客户和雇员的申请。 为了实现从构思到执行的结尾2,我们给你带来了这个DB UI Core的新版本(npm: `@db-ui/core`这在S.R.(Reisenden Information)的设计系统中也使用.

DB UI Core提供强大的HTML UI组件,可再用可视化风格,以及强大的工具来帮助开发者,设计者,以及内容作者构建,维护,并缩放最佳的类数字体验.

我们不再设计网页。 我们正在设计组件系统.

[斯蒂芬・海](https://bradfrost.com/blog/post/bdconf-stephen-hay-presents-responsive-design-workflow/)。 。 。 . [在布拉德·弗罗斯特在特莱伦德会议外的演讲中引用.](https://vimeo.com/67476280 "Brad Frosts at beyond tellerrand conference regarding Atomic Design")

## tl; 医生"太长"丹尼回答

-   [开始](https://npmcn.com/package/%40db-ui/core/docs/getStarted.adoc)
-   [GitHub - DB UI 核心软件](https://github.com/db-ui/core/)
-   [托管版本的 DB UI 核心活式指南](https://db.de/db-ui)
-   建议开发 JavaScript 应用程序 : [DB UI 元素](https://db-ui.github.io/elements/)
-   [从 DB UI Core 第 1 版到 第 2 版的移动指南](https://npmcn.com/package/%40db-ui/core/docs/migrationGuide.adoc#user-content-db-ui-core-2-0-0-migration-guide)

## 核心校长

### 一致的比对( C)

DB UI 核心基于 [DB UX 设计系统 v2](https://marketingportal.extranet.deutschebahn.com/marketingportal/Design-Anwendungen/db-ux-design-system/version-2/Components)这是所有Personenverkehr客户和德国Bahn企业网站和网络应用程序的准则.

### 可访问

DB UI Core 杠杆语义 HTML, ARIA 角色,状态和属性尽可能应用我们的风格,从而强制进行正确,可访问的标记. 我们正在质量检查 这一点与合作 [团队数字无障碍](https://db.de/8pei5n)。 。 。 .

### 声明

DB UI Core使用声明选择器而不是视觉帮助器,以确保我们的HTML类名称和结构是人类读取和可理解的,精益求精的,能表现的和如此容易更新的.

### 脱钩

DB UI Core与JavaScript层脱钩,以便在任何Web开发技术背景下执行模式;我们正在提供通用Web组件和原生JS框架组件 [DB UI 元素](https://db-ui.github.io/elements/) 还有.

### 常绿

作为 [DB UX 设计系统 v2](https://marketingportal.extranet.deutschebahn.com/marketingportal/Design-Anwendungen/db-ux-design-system/version-2/Components) 演化,DB UI Core也是这样,意思是应用只需要不断更新他们的DB UI Core包,以确保最新的外观和感觉.

## 更多信息

此外,我们将在一段时间内提供更多的信息,使整个生态系统重新定级:

-   [DB UX 设计系统 v2 文档在 DB 营销端口( german)](https://marketingportal.extranet.deutschebahn.com/marketingportal/Design-Anwendungen/db-ux-design-system/version-2/Components)
-   [相通/ Base Wiki - "Technische Umsetzung des Entertainment UI Design Systems"(german,只有内部可用)](https://db.de/pu8moh)
-   [组合 - Web UI 组件库(仅内部可用)](https://db.de/1tyr73)
-   [更改日志](https://github.com/db-ui/core/blob/main/CHANGELOG.md)
-   [建筑决定记录](https://github.com/db-ui/core/tree/main/docs/adr)
-   [DB UI Core 1.x Gitlab 寄存器(仅可内部访问)](https://db.de/4cwtyn/)

## 要记住的事

### 为社区发展和由社区推动

这主要是为被整理的组件提供共同基础的空间与技术的平台;它们的发展主要是由社区驱动的,并通过我们从社区得到的大量反馈来适应项目中完成的工作. 所以,请以任何可能的方式支持我们,这是非常感谢的!

## 如何使用

下载 DB UI Core 以获取编译的 CSS( 和 JavaScript 的小部分), 源代码, 或者包含 npm 软件包管理器( 存储于 _npmjs.com (英语)_ 或者说 _线条_) (中文(简体) ).

### _npmjs.com (英语)_ 或者说 _线条_ (建议)

如果您想在您( 前端) 构建过程中将 DB UI Core 用作依赖, 并且您甚至关心将 DB UI Core 作为依赖处理( 如用于更新等) , 您需要安装它作为您的项目的依赖, 然后在您的 HTML( CSS 文件) 或您的 SCSS 中链接它 . 请检查一下 [文件 / 开始](https://npmcn.com/package/%40db-ui/core/docs/getStarted.adoc) 详细指示.

### 下载或 CDN 引用

您也可以下载您将在其他地方通过节点包直接取回的所有文件,或者直接从CDN中引用这些文件,如所列几个不同的服务,例如: [https://yarnpkg.com/package/@db-ui/core (中文(简体) )](https://yarnpkg.com/package/@db-ui/core)

## 如何开始开发/贡献

```Bash
npm install
npm run build
npm run start
```

请注意 [承诺公约](https://npmcn.com/docs/conventions.adoc#user-content-git-commits-conventions)。 。 。 .

## 给我们你的反馈!

这只是我们框架的第一个版本,我们真的想要你的反馈 - 要么在内部 [由微软Teams的Web Dev社区提供的DB UI频道(只有内部可用的DB)](https://db.de/krnm74),或直接在 [db-ux-designsystem@deutschebahn.com (英语)](mailto:db-ux-designsystem@deutschebahn.com)。 。 。 . 我们特别渴望在行为中增加尽可能多的例子,以进一步澄清它们.

## 财务问题

### 我们 `scss` 编号 : `sass` 从 DB UI Core 第1 版迁移后,构建不再有效.

若您发现以下错误 请检查是否 [提供您的地址 `node_modules` 文件夹路径到您的 sass 编译器](https://npmcn.com/package/%40db-ui/core/docs/migrationGuide.adoc#user-content-db-ui-core-2-0-0-migration-guide)数字 :

```shell
./src/styles.scss - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
╷
│ @use "@csstools/normalize.css/normalize.css";
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules\@db-ui\core\sources\css\enterprise\db-ui-core.scss 7:1 @import
node_modules\@db-ui\core\sources\css\enterprise\db-ui-core-include.scss 4:9 @import
src\styles.scss 5:9 root stylesheet
```

## 德国Bahn品牌

由于我们想在用户和客户的数码旅程中完美地支持他们,使用德乙品牌和商标,即使在使用我们提供的这个产品代码时,也必然有明确的指导方针和限制;德乙完全保留了对德乙品牌的所有权利和所有权,尽管我们正在提供DB UI产品的代码,在Apache 2.0许可下可以自由使用并发布. 请看看我们 [品牌门户](https://marketingportal.extranet.deutschebahn.com/) 就任何品牌问题与谁联系。 由于这些资产和视觉指南是从我们德国Bahn营销门户上收回的,你同意 [(原始内容存档于2013-10-12). Algemeine Nutzungsbedingungen für das DB-Marketingportal (german)](https://marketingportal.extranet.deutschebahn.com/marketingportal/Nutzungsbedingungen-9702684) 以防使用它们.

对于Deutsche Bahn网站和应用程序以外的任何用途,您必须删除或替换任何Deutsche Bahn品牌和设计资产以及受保护的特征和商标。 我们甚至还计划提供一个中立的主题,使你不用德乙的商标就能更容易地使用我们的产品.

这尤其涉及到目录中的文件 `/source/fonts/`, (中文(简体) ), `source/images` 财务报告和审定财务报表 `source/samples` 财务报告和审定财务报表 `source/favicon.ico` 还有.

## 捐款

发言非常受欢迎,请参看 [捐款指南](https://npmcn.com/package/%40db-ui/core/CONTRIBUTING.md)。 。 。 .

## 第三方承认!

-   [由 opr.vc 打开隐私](https://opr.vc/)

## 行为守则

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

## 许可证

这个项目的许可证根据 [阿帕奇 - 2.0](https://npmcn.com/package/%40db-ui/core/LICENSE),版权由DB Systel GmbH提供.

## 常见问题

### @db-ui/core 是什么？

技术前端实施DB UX设计系统\.

### 如何安装 @db-ui/core？

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

### @db-ui/core 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/db-ui\_\_core 是否存在。

### @db-ui/core 可以商用吗？

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

### @db-ui/core 的下载量有多少？

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

### @db-ui/core 还在维护吗？

最新版本 3\.3\.7 发布于 2026/02/18（8 个月前）；至今共发布 91 个版本，其中过去 12 个月发布了 1 个；首次发布于 2022/05/07。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。