@db-ux/核心组件
一个包含所有样式的库,用于组件 DB UX 设计系统 - 第3代。 。 。 .
说明 此外,我们目前还支持这些新增的JavaScript框架,不久将有更多的框架:
请查看您想要获取更多信息的框架 .
关于框架之外的其他信息,见我们 开始。 。 。 .
如果你只是需要 样式跟着这个:
软件包关系
如果安装组件,我是否需要地基?
没有! 这个 @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: 资产路径指向../assetswebpack: 资产路径指向~@db-ux/core-foundations/assetsrollup: 资产路径指向@db-ux/core-foundations/assets
重要: 这些捆绑的文件自动包含 所有从 基金会 (设计标志,颜色,字体等) 和所有项目 组件 -你需要的都一样!
导入
导入主样式 .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,它为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).
优化依赖性
如果您只需要一些组件或一些特性来自 @db-ux/core-foundations,你不应该包括捆绑的文件.
如果你想只包含一些组件,你可以这样做:
/* 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/ 页面存档备份,存于互联网档案馆 就任何品牌问题与谁联系.
对于德国Bahn网站和应用程序以外的任何用途,你不得使用任何德国Bahn品牌和 设计资产以及受保护的特征和商标,用于不包括DB主题.
捐款
发言非常受欢迎,请参看 捐款指南。 。 。 .
行为守则
作为成员、贡献者和领导人,我们保证参与我们的工作 人人无骚扰的体验 《公约》的行为守则。 。 。 .
许可证
这个项目的许可证根据 阿帕奇 - 2.0。 。 。 .