# @db-ux/core-components 中文文档 规范地址：https://npmcn.com/package/%40db-ux/core-components/ 版本：6\.3\.2 npm 元数据更新时间：2026-11-11T12:59:00.576Z 中文译文更新时间：2026-11-11T16:50:37.978Z 软件包许可：Apache-2\.0 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40db-ux/core-components 原文对照：https://npmcn.com/package/%40db-ux/core-components/?lang=original 源码仓库：https://github.com/db-ux-design-system/core-web ## 关键信息（来自 npm 元数据） - 包体积（解压后）：10.3 MB，212 个文件 - 模块格式：ES Module - TypeScript 类型：未声明 - 运行依赖：1 个 - 首次发布：2025-02-13T13:53:03.771Z - 最新版本发布：2026-11-11T12:59:00.131Z - 近 30 天下载量：8808（2026-10-12 至 2026-11-10，npm 官方下载统计） - 已发布版本数：200（近 12 个月 119 个） ## 中文简介 DB UX 设计系统的一般技术组件(样式、字体和图标) – 第3代 ## 安装 ```sh npm install @db-ux/core-components ``` 也可以使用：`pnpm add @db-ux/core-components`、`yarn add @db-ux/core-components`、`bun add @db-ux/core-components` ## README # @db-ux/核心组件 ![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/) 一个包含所有样式的库,用于组件 [DB UX 设计系统 - 第3代](https://github.com/db-ux-design-system/core-web)。 。 。 . > **说明** 此外,我们目前还支持这些新增的JavaScript框架,不久将有更多的框架: - [角构件](https://www.npmjs.com/package/@db-ux/ngx-core-components) - [反应组件](https://www.npmjs.com/package/@db-ux/react-core-components) - [Vue 组件](https://www.npmjs.com/package/@db-ux/v-core-components) - [网络组件](https://www.npmjs.com/package/@db-ux/wc-core-components) 请查看您想要获取更多信息的框架 . 关于框架之外的其他信息,见我们 [开始](https://github.com/db-ux-design-system/core-web/tree/main/packages/components/docs/getting-started.md)。 。 。 . * * * 如果你只是需要 样式跟着这个: ## 软件包关系 **如果安装组件,我是否需要地基?** **没有!** 这个 `@db-ux/core-components` 软件包 **自动包含** 所有基金会`@db-ux/core-foundations`你需要帮助。 您只需要包含一个软件包 : - **使用 `@db-ux/core-components`** - 如果你想使用UI组件(按钮、输入等) - **使用 `@db-ux/core-foundations`** - 如果您只需要设计标志、 颜色、 间隔、 字体和没有组件样式的资产 ## 安装 `npm i @db-ux/core-components` > **说明**: 自动包含 `@db-ux/core-foundations` 作为依赖,如果使用 `npm`。如果您使用 `pnpm` 您需要安装 `@db-ux/core-foundations` 还有. ## 型态依赖 导入样式 `css`根据您的技术,文件名可能不同. - `relative`: 资产路径指向 `../assets` - `webpack`: 资产路径指向 `~@db-ux/core-foundations/assets` - `rollup`: 资产路径指向 `@db-ux/core-foundations/assets` **重要**: 这些捆绑的文件自动包含 **所有从 [基金会](https://www.npmjs.com/package/@db-ux/core-foundations)** (设计标志,颜色,字体等) **和所有项目 [组件](https://github.com/db-ux-design-system/core-web/blob/main/packages/components/src/styles/db-ux-components.scss)** -你需要的都一样! ### 导入 导入主样式 `.css` 文档. ```css /* index.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); ``` > **注:** 从Vite 8开始,默认的 CSS 修饰符被修改为 [闪电CSS](https://lightningcss.dev/),它为DB UX设计系统(例如. `light-dark()` CSS 函数). 我们可以提供必要的具体配置,以在不久的将来缓解这些问题。 同时保持CSS输出稳定,配置 `vite.config.ts` 像这样: ```ts // vite.config.ts export default defineConfig({ build: { cssMinify: "esbuild" } }); ``` > 或者,您可以定义 [浏览器列表](https://browsersl.ist/) 基于您个人浏览器支持策略——它可能与默认定义的Vite 8 列表(从2020年代初开始的目标浏览器)完全不同: ```ts // Note: You need to install the required packages first: // npm install -D lightningcss browserslist // vite.config.ts import { browserslistToTargets } from "lightningcss"; import browserslist from "browserslist"; export default defineConfig({ css: { lightningcss: { targets: browserslistToTargets( browserslist( ">= 0.5%, last 2 major versions, Firefox ESR, not dead" ) ) } } }); ``` ### DB 主题 若您正在为 Deutsche Bahn 建立一个网站或应用程序,您还需通过 [`@db-ux/db-theme`](https://www.npmjs.com/package/@db-ux/db-theme) 节点包(甚至也可以作为内源节点包提供,如该包所描述的README). ### 优化依赖性 如果您只需要一些组件或一些特性来自 [`@db-ux/core-foundations`](https://www.npmjs.com/package/@db-ux/core-foundations),你不应该包括捆绑的文件. 如果你想只包含一些组件,你可以这样做: ```css /* The theme contains all props required for components like spacings, colors, ... */ @import "@db-ux/core-foundations/build/styles/bundle.css"; /* The font include uses default font families based on your bundling paths (relative, absolute, webpack, rollup) */ @import "@db-ux/core-foundations/build/styles/fonts/rollup.css"; /* The required styles will normalize css and add focus and default font to body */ @import "@db-ux/core-foundations/build/styles/defaults/default-required.css"; /* The default setting for :root, adds a color space (neutral-bg-basic-level-1) and a density (regular). */ @import "@db-ux/core-foundations/build/styles/defaults/default-root.css"; /* Optional: Add animations / transitions for components */ @import "@db-ux/core-components/build/styles/component-animations.css"; /* Optional: Add data-icon/data-icon-trailing to global attributes to enable icons for components */ @import "@db-ux/core-foundations/build/styles/icons/rollup.css"; /* Optional: Add components */ @import "@db-ux/core-components/build/components/button/button.css"; @import "@db-ux/core-components/build/components/input/input.css"; ``` ## 德国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/core-components/LICENSE)。 。 。 . ## 常见问题 ### @db-ux/core-components 是什么？ DB UX 设计系统的一般技术组件\(样式、字体和图标\) – 第3代 ### 如何安装 @db-ux/core-components？ 在项目目录运行 npm install @db-ux/core-components，或使用 pnpm add / yarn add / bun add。 ### @db-ux/core-components 支持 TypeScript 吗？ 该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/db-ux\_\_core-components 是否存在。 ### @db-ux/core-components 支持 ESM 还是 CommonJS？ 以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。 ### @db-ux/core-components 可以商用吗？ @db-ux/core-components 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。 ### @db-ux/core-components 的下载量有多少？ 根据 npm 官方下载统计，@db-ux/core-components 在 2026/10/12 – 2026/11/10 这 30 天内被下载 8,808 次，日均约 294 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @db-ux/core-components 还在维护吗？ 最新版本 6\.3\.2 发布于 2026/11/11（今天）；至今共发布 200 个版本，其中过去 12 个月发布了 119 个；首次发布于 2025/02/13。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。