# @db-ux/core-foundations 中文文档 规范地址：https://npmcn.com/package/%40db-ux/core-foundations/ 版本：6\.3\.2 npm 元数据更新时间：2026-11-11T12:58:21.489Z 中文译文更新时间：2026-11-11T16:50:20.207Z 软件包许可：Apache-2\.0 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40db-ux/core-foundations 原文对照：https://npmcn.com/package/%40db-ux/core-foundations/?lang=original 源码仓库：https://github.com/db-ux-design-system/core-web ## 关键信息（来自 npm 元数据） - 包体积（解压后）：3.2 MB，305 个文件 - 模块格式：ES Module - TypeScript 类型：包内自带 - 运行依赖：0 个 - 首次发布：2025-02-13T13:52:52.743Z - 最新版本发布：2026-11-11T12:58:21.042Z - 近 30 天下载量：9200（2026-10-12 至 2026-11-10，npm 官方下载统计） - 已发布版本数：200（近 12 个月 119 个） ## 中文简介 基于 DB UX 设计系统 – Generation 3 提供基本符和资产 ## 安装 ```sh npm install @db-ux/core-foundations ``` 也可以使用：`pnpm add @db-ux/core-foundations`、`yarn add @db-ux/core-foundations`、`bun add @db-ux/core-foundations` ## 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)。 。 。 . ## 何时使用此软件包 **寻找UI组件?** 你也许想要 [`@db-ux/core-components`](https://www.npmjs.com/package/@db-ux/core-components) 相反,哪个 **自动包含** 这个包裹. **如果您 :** - 只需要设计符号( 颜色、 间距、 字体) 没有组件样式 - 想要使用设计系统符号构建自定义组件 - 只需要没有预建组件的图标和字体 **使用 [`@db-ux/core-components`](https://www.npmjs.com/package/@db-ux/core-components) 当你:** - 想要使用现成的UI组件(按钮,输入,导航等) - 既需要设计符号,也需要组件样式(最常见的使用大小写) 目前我们支持: - [支助科](https://npmcn.com/package/%40db-ux/core-foundations/#readme-css) - [常设委员会](https://npmcn.com/package/%40db-ux/core-foundations/#readme-scss) - [尾风](https://npmcn.com/package/%40db-ux/core-foundations/#readme-tailwind) ## 安装 ```shell npm i @db-ux/core-foundations ``` ## 使用量 如果您需要颜色、间距等, 请使用此库 . > **tl; 医生 :** 通过导入使用默认主题和捆绑样式 `bundle.css` 财务报告和审定财务报表 `theme/[relative|absolute|rollup|webpack].css`。 。 。 . * * * 首先, 您需要导入一个包含所有符号( css- propertys) 的主题 。 我们提供 `theme/[relative|absolute|rollup|webpack].css` 它也处理暗/光模式. 之后,您可以导入帮助类 / 占位符来方便地从您的主题中消耗符号 。 有一些类别: - **输入**: 适用于所有或大组选择者的全局样式。 确保导入 `inits/required.css` 普通标记 `body` 此外,我们提供一些默认样式. - **图标**: 要装入的图标类 **宽度2** 文件和添加 `[data-icon]` 财务报告和审定财务报表 `[data-icon-trailing]` 以启用所有标签和组件的图标. - **帮助者**: 使用分隔符或焦点边框 - **字体**: 覆盖默认 `font-size`, (中文(简体) ), `line-height` 财务报告和审定财务报表 `icon-size` - **密度**: 覆盖默认密度以使用密度在容器内缩放适应性组件 - **颜色**: 设置一个容器的适应性颜色,将所有所需的cs财产传给儿童 这个 `bundle.css` 应用这些默认 : - [密度](https://marketingportal.extranet.deutschebahn.com/marketingportal/Design-Anwendungen/db-ux-design-system/version-3/principles/adaptive#:~:text=und%20Textfarben%20sicherstellt.-,Sizing,-Adaptive%20Sizing%20ist)数字 : `regular` - [适应色彩](https://marketingportal.extranet.deutschebahn.com/marketingportal/Design-Anwendungen/db-ux-design-system/version-3/principles/adaptive#:~:text=Akzeptieren-,Coloring,-Adaptive%20Coloring%20bezieht)数字 : `neutral-bg-lvl-1` ### 支助科 默认资产路径 `relative.css` 实值 `../../../assets`,与软件包结构相匹配(`build/styles/` 财务报告和审定财务报表 `assets/`) (中文(简体) ). 这使得您可以直接从包装CSS,例如从CDN装入. 如果你把文件复制到您的 `public` 文件夹中,请保留此结构. **或者说** 你用现代的捆绑机 帮你处理捆绑 在这种情况下,使用 `[rollup|webpack].css`。 。 。 . #### 导入 导入主样式 `.css` 文档. ```css /* index.css */ @layer whitelabel-theme, db-ux; @import "@db-ux/core-foundations/build/styles/theme/relative.css" layer(theme); @import "@db-ux/core-foundations/build/styles/bundle.css" layer(db-ux); /* Optional: Use [data-divider] & [data-focus] everywhere */ @import "@db-ux/core-foundations/build/styles/helpers/classes/all.css" layer(db-ux); /* Optional: Use [data-density] everywhere */ @import "@db-ux/core-foundations/build/styles/density/classes/all.css" layer(db-ux); /* Optional: Use [data-font-size] everywhere */ @import "@db-ux/core-foundations/build/styles/fonts/classes/all.css" layer(db-ux); /* Optional: Use [data-color] everywhere */ @import "@db-ux/core-foundations/build/styles/colors/classes/all.css" layer(db-ux); ``` #### 使用 在CSS中: ```css .my-container { padding: var(--db-spacing-fixed-md); } ``` 在 HTML 中: ```html
``` > **说明:** 在CSS中,您可能更多使用类或数据属性,因为您不能使用占位符或混音符,就像我们有它 **缩写**。如果您使用 3 党的库, 并且无法应用类或数据属性, 您可能想要复制我们帮助类的内容, 以便应用到 3 党的类 . ### 常设委员会 #### 使用 在常设委员会: ```scss @use "@db-ux/core-foundations/build/styles/variables"; .my-container { padding: variables.$db-spacing-fixed-md; } ``` 在具有占位符的SCSS中: ```scss @use "@db-ux/core-foundations/build/styles/fonts"; @use "@db-ux/core-foundations/build/styles/colors"; .placeholder-container { @extend %db-overwrite-font-size-sm; @extend %db-successful-bg-lvl-1; } ``` 在 HTML 中: ```html
``` ### 尾风 检查所需进口 [支助科](https://npmcn.com/package/%40db-ux/core-foundations/#readme-css) 以启用所有符号和默认值. #### 尾风 v4 ```css @import "tailwindcss"; @import "@db-ux/core-foundations/build/tailwind/theme/index.css"; ``` #### 尾风 v3 > **说明:** 在 Tailwind v4 中, 您可以使用配置 `@config "tailwind.config.[js|ts]";` 在你体内 `.css` 还有档案. 在此之后, 您可以扩展尾风配置 : ##### Java 脚本 ```javascript //tailwind.config.js /** @type {import('tailwindcss').Config} */ import tokens from "@db-ux/core-foundations/build/tailwind/tailwind-tokens.json"; export default { content: ["./index.html", "./src/**/*.{js,jsx,ts,tsx}"], plugins: [], theme: { ...tokens, gap: ({ theme }) => ({ ...theme("spacing") }), space: ({ theme }) => ({ ...theme("spacing") }) } }; ``` ##### 类型脚本 ```typescript //tailwind.config.ts import type { Config } from "tailwindcss"; import { CustomThemeConfig } from "tailwindcss/types/config"; import tokens from "@db-ux/core-foundations/build/tailwind/tailwind-tokens.json"; const customThemeConfig: CustomThemeConfig = tokens as any; export default { content: [], theme: { ...customThemeConfig, gap: ({ theme }) => ({ ...theme("spacing") }), space: ({ theme }) => ({ ...theme("spacing") }) }, plugins: [] } satisfies Config; ``` 在你身边 `tailwind.css` 添加此选项以启用默认头条 : ```css @layer base { h1 { @apply text-head-xl font-head; } h2 { @apply text-head-lg font-head; } h3 { @apply text-head-md font-head; } h4 { @apply text-head-sm font-head; } h5 { @apply text-head-xs font-head; } h6 { @apply text-head-2xs font-head; } } ``` #### 使用 ```html
``` ## 优化依赖性 如果您想要优化加载样式的大小, 可能要跳过加载 `@db-ux/core-foundations/build/styles/[relative|absolute|rollup|webpack].css`。但这个设计系统需要一些样式才能正常工作. ### 主题、 资产和输入 ```css /* The theme contains all prop required for components like spacings, colors, etc. You can replace it with your own theme. */ @import "@db-ux/core-foundations/build/styles/theme/relative.css"; /* The font include uses default font families based on your bundling paths (relative, absolute, webpack, rollup). You can replace it with your own fonts. */ @import "@db-ux/core-foundations/build/styles/fonts/relative.css"; /* The icon include uses default icons based on your bundling paths (relative, absolute, webpack, rollup). You can replace it with your own icons. */ @import "@db-ux/core-foundations/build/styles/icons/relative.css"; ``` #### 优化索引 您也可以优化初始设置 : ```css /* The required styles normalize css, add focus, set the default body font, and apply the mandatory headline typography (font-sizes & line-heights) to h1-h6. */ @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"; /* Adds the optional font-weight utilities ([data-font], heading [data-variant]) and the small/code font-size. The headline h1-h6 typography is no longer here - it moved to default-required.css. */ @import "@db-ux/core-foundations/build/styles/defaults/default-fonts.css"; /* Adds "[data-icon]" and other icon related styles. If you don't need icons in your application you could skip this. */ @import "@db-ux/core-foundations/build/styles/defaults/default-icons.css"; /* Adds "[data-elevation]" and other icon related styles. If you don't need elevation in your application you could skip this. */ @import "@db-ux/core-foundations/build/styles/defaults/default-elevation.css"; /* Adds defaults for `blockquote`, `code` and `pre`. If you don't need them in your application you could skip this. */ @import "@db-ux/core-foundations/build/styles/defaults/default-code.css"; ``` ## 字体预装 确保最佳性能和可靠性——特别是在片面或离线互联网条件下—— **您可以预装或至少预选应用程序所依赖的任何字体**。 。 。 . ### 如何预装字体 在识别您应用程序的 UI 所需的关键字体后, 请使用以下 `` 标记在 `` 预装的 HTML 中: ```html ``` 否则,如果最初不需要字体,但稍后会请求,或者由一些动态插入的内容请求,则仍然可以 [预选](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/rel/prefetch) 这个 优先级低于 `preload`数字 : ```html ``` ### 用于识别要预装字体的提示 - 使用浏览器 Dev 工具跟踪对您的应用程序至关重要的字体请求 - 在不稳定连接中无法加载的字体应当优先排序 . ### 重要说明 - 确保 `href` 路径在运行时正确且可访问. - 总是使用 `crossorigin="anonymous"` 对于从您域或CDN服务过的字体,除非您的服务器需要证书(仅限字体). - 通过这种方式预先加载字体,提高了所感知的性能并避免了在初始渲染过程中的布局转变或隐形文字. ## 移徙 关于不同版本之间的移徙指导,见 [迁移文件](https://github.com/db-ux-design-system/core-web/tree/main/docs/migration/)。 。 。 . ## 德国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-foundations/LICENSE)。 。 。 . ## 常见问题 ### @db-ux/core-foundations 是什么？ 基于 DB UX 设计系统 – Generation 3 提供基本符和资产 ### 如何安装 @db-ux/core-foundations？ 在项目目录运行 npm install @db-ux/core-foundations，或使用 pnpm add / yarn add / bun add。 ### @db-ux/core-foundations 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @db-ux/core-foundations 支持 ESM 还是 CommonJS？ 以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。 ### @db-ux/core-foundations 可以商用吗？ @db-ux/core-foundations 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。 ### @db-ux/core-foundations 的下载量有多少？ 根据 npm 官方下载统计，@db-ux/core-foundations 在 2026/10/12 – 2026/11/10 这 30 天内被下载 9,200 次，日均约 307 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @db-ux/core-foundations 还在维护吗？ 最新版本 6\.3\.2 发布于 2026/11/11（今天）；至今共发布 200 个版本，其中过去 12 个月发布了 119 个；首次发布于 2025/02/13。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。