@db-ux/ngx-核心组件
包含所有样式和组件的角库( A) DB UX 设计系统(技术部件)。 。 。 . 我们还提供了有关具体组成部分的更多信息。 这个信息在我们 设计系统文件。 。 。 .
安装
pnpm add @db-ux/ngx-core-components @db-ux/core-components @db-ux/core-foundations --save-dev
型态依赖
导入您 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 以减小你的捆绑大小。 它通过解析 CSS 自定义属性来平分 var(), (中文(简体) ), calc(), (中文(简体) ), color-mix(),以及 light-dark() ,删除未使用的申报.
pnpm add @db-ux/core-postcss-plugin --save-dev
创建一个 postcss.config.json 在您的工程根中 :
{
"plugins": {
"@db-ux/core-postcss-plugin": {}
}
}
角 CLI (英语:
@angular/build:application)只支持基于 JSON 的 PostCSS 配置和加载插件require()两者都起作用ng build财务报告和审定财务报表ng serve。 。 。 .
📖 学习更多关于 @db-ux/core-postcss-plugin 节点软件包
解决资产
当前默认开发配置 angular.json 不使用输出散列。 这可能造成一个装入字体的问题 。 看着 这个 更多信息.
作为解决办法,添加 "outputHashing": "media" 改为 configurations/development 内 angular.json。 。 。 .
DB 主题
若您正在为 Deutsche Bahn 建立一个网站或应用程序,您还需通过 @db-ux/db-theme 节点包(甚至也可以作为内源节点包提供,如该包所描述的README).
使用量
// app.component.ts
import { DBButton } from '@db-ux/ngx-core-components';
@Component({
// ...
imports: [
// ...,
DBButton
],
standalone: true
// ...
})
<!-- app.component.html -->
<db-button variant="brand">Button</db-button>
活动
在 Angular 有三种方式使用事件:
<db-input
label="Inputfield"
name="input-name"
[(ngModel)]="inputModel"
></db-input>
<db-input
label="Inputfield"
name="input-name"
[formControl]="inputControl"
></db-input>
<db-input
label="Inputfield"
name="input-name"
(change)="inputModel = $event.target.value"
></db-input>
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 节点软件包
代码质量
为了在您的 Angular 模板中强制正确使用 DB UX 设计系统组件,我们提供 @db-ux/core-eslint-plugin ESLint 插件 .
安装
pnpm add eslint @db-ux/core-eslint-plugin @angular-eslint/template-parser --save-dev
设置
// 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 节点软件包
样式林
为了在您的 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。 。 。 .