@db-ux/wc-核心组件
一个包含所有组件的网络组件库 DB UX 设计系统(技术部件)。 。 。 . 我们还提供了有关具体组成部分的更多信息。 这个信息在我们 设计系统文件。 。 。 .
安装
pnpm add @db-ux/wc-core-components @db-ux/core-components @db-ux/core-foundations --save-dev
型态依赖
虚拟插件
如果你使用维特,你可以使用 @db-ux/core-vite-plugin 它简化了 CSS 设置为单一导入.
pnpm add @db-ux/core-vite-plugin --save-dev
将插件添加到您的 vite.config.ts数字 :
import { defineConfig } from "vite";
import dbUxPlugin from "@db-ux/core-vite-plugin";
export default defineConfig({
plugins: [dbUxPlugin()]
});
然后导入您的 CSS 文件的插件 :
/* index.css */
@import "@db-ux/core-vite-plugin/index.css";
📖 学习更多关于 @db-ux/core-vite-plugin 节点软件包
PostCSS 插件( 建议)
我们建议使用 @db-ux/core-postcss-plugin 以减小你的捆绑大小。 它通过解析 CSS 自定义属性来平分 var(), (中文(简体) ), calc(), (中文(简体) ), color-mix(),以及 light-dark() ,删除未使用的申报.
pnpm add @db-ux/core-postcss-plugin --save-dev
装入 vite.config.ts数字 :
import { defineConfig } from "vite";
import { dbUxFlatten } from "@db-ux/core-postcss-plugin";
export default defineConfig({
css: {
transformer: "postcss", // required for Vite 8+ (default: 'lightningcss')
postcss: {
plugins: [dbUxFlatten()]
}
}
});
📖 学习更多关于 @db-ux/core-postcss-plugin 节点软件包
手动 CSS 设置
如果您没有使用Vite或偏好手动设置, 请导入您 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);
视频 8
从Vite 8开始,默认的 CSS 修饰符被修改为 闪电CSS,它为DB UX设计系统(例如. light-dark() CSS 函数). 保持 CSS 输出稳定, 配置 vite.config.ts 像这样:
// vite.config.ts
export default defineConfig({
build: {
cssMinify: "esbuild"
}
});
或者,您可以定义 浏览器列表 基于您个人浏览器支持策略——它可能与默认定义的Vite 8 列表(从2020年代初开始的目标浏览器)完全不同:
// 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 节点包(甚至也可以作为内源节点包提供,如该包所描述的README).
使用量
这个包提供了两个输出变体:
默认( 需要) @stencil/core 作为同伴依赖)
默认入站使用斯通西尔的懒惰加载器. @stencil/core 必须单独安装.
npm i @stencil/core
// main.js
import { defineCustomElements } from "@db-ux/wc-core-components";
defineCustomElements();
套装( 无外部依赖)
捆绑出入口完全自成一体—— @stencil/core 被捆绑起来,不需要单独安装.
// main.js
import { defineCustomElements } from "@db-ux/wc-core-components/bundle/index.js";
defineCustomElements();
然后在您的 HTML 中任意使用 :
<db-button variant="brand">Add item to cart</db-button>
VSCode 自动完成
如果您还没有, 请在您的工程根部添加 VS 代码设置文件夹和文件 - .vscode/settings.json,然后添加或附加以下代码:
{
"html.customData": [
"./node_modules/@db-ux/wc-core-components/dist/vscode.html-custom-data.json"
]
}
AI 代理支持
对于使用GitHub Copilot或Amazon Q等AI编码助理的开发者,我们提供 @db-ux/agent-cli 自动将 DB UX 设计系统文档添加到您的仓库的工具.
快速启动
在您的仓库中运行此命令 :
npx @db-ux/agent-cli
这将创建或更新 .github/copilot-instructions.md 根据您安装的组件文档 @db-ux 软件包,帮助AI代理商提供更好的建议.
📖 学习更多关于 @db-ux/agent-cli 节点软件包
样式林
为了在您的 CSS/ SCSS 中验证对 DB UX 设计系统符号的正确使用, 请使用 @db-ux/core-stylelint 插件 .
安装
pnpm add stylelint @db-ux/core-stylelint --save-dev
设置
添加到您的 .stylelintrc.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 节点软件包
德国Bahn品牌
由于我们想在数字化旅程中完全支持我们的用户和客户,即使使用我们提供的这个产品代码,Deutsche Bahn品牌和商标的使用也有明确的指导方针和限制; Deutsche Bahn完全保留了对Deutsche Bahn品牌的所有权利,尽管我们正在提供DB UX Design System产品的代码,根据Apache 2.0许可证可以自由使用并发布. 请看看我们的品牌门户 https://marketingportal.extranet.deutschebahn.com/ 页面存档备份,存于互联网档案馆 就任何品牌问题与谁联系.
对于德国Bahn网站和应用程序以外的任何用途,你不得使用任何德国Bahn品牌和 设计资产以及受保护的特征和商标,用于不包括DB主题.
捐款
发言非常受欢迎,请参看 捐款指南。 。 。 .
行为守则
作为成员、贡献者和领导人,我们保证参与我们的工作 人人无骚扰的体验 《公约》的行为守则。 。 。 .
许可证
这个项目的许可证根据 阿帕奇 - 2.0。 。 。 .