@db-ux/db-主题信息

我们在这个软件包中为 DB Apps 提供 db 主题fonts 。 由于法律问题,一些文件被加密。 要解密他们 你需要去 营销门户。 。 。 . 说明: 深链接不起作用,您需要在登录后再次点击链接.

您可以在页面上找到两个环境变量:

• ASSET_PASSWORD
• ASSET_INIT_VECTOR

在安装前 @db-ux/db-theme-fonts 您需要创建 .env 文档并添加到您的 .gitignore后,将这两个变量添加到 .env 文档.

ASSET_PASSWORD=db-theme-fonts
ASSET_INIT_VECTOR=db-theme-fonts

这个 postinstall 脚本在内 @db-ux/db-theme-fonts 软件包将为您解密文件。 如果解密对你无效(例如因为Git生命周期剧本,例如: postinstall,已失效,例如被 ignore-scripts 设置),您需要手动运行解密脚本(参见我们 “贡献”/“比较”文档 页:1 或者,你可以将这些节点脚本包含在生命周期脚本中.

说明: 你用得着 process.env. 本地或CI/CD中将所需的环境变量传递到 postinstall。 。 。 .

安装

说明: 阅读上面的免责声明:)

npm i @db-ux/db-theme-fonts

用法为 @db-ux/core-components

导入

包含这个主题有不同的方式. 因此,您需要导入正确的 .css 文档。 根据您使用的捆绑器, 会有多个文件 . [TYPE] 如果您不使用相对路径, 则应该用您的捆绑器替换 :

• relative: 无捆绑器
• absolute: 无捆绑器
• rollup数字 : vite, (中文(简体) ), rollup
• webpack数字 : webpack, (中文(简体) ), nextjs

联合来文/TS

// main.[js|ts]
import "@db-ux/core-components/build/styles/bundle.css"; /* loads whitelabel */
import "@db-ux/db-theme-fonts/build/styles/[TYPE].css"; /* Overwrite whitelabel  */

支助科

/* main.css */
@import "@db-ux/core-components/build/styles/bundle.css"; /* loads whitelabel */
@import "@db-ux/db-theme-fonts/build/styles/[TYPE].css"; /* Overwrite whitelabel  */

维特

您可能需要添加一个 resolve 内 vite.config.[js|ts]数字 :

import * as path from "node:path";

export default defineConfig({
    ...
    resolve: {
        alias: {
            "@db-ux": path.resolve("node_modules/@db-ux"),
        },
    },
});

高级设置

而不是覆盖白标签( N)[TYPE].css)也可以包括每个 .css 您需要在您的项目中:

// main.[js|ts]

/* load components */
import "@db-ux/core-components/build/styles/index.css";

/* load foundations (optional) */
import "@db-ux/core-foundations/build/styles/helpers/classes/all.css";
import "@db-ux/core-foundations/build/styles/density/classes/all.css";
import "@db-ux/core-foundations/build/styles/fonts/classes/all.css";
import "@db-ux/core-foundations/build/styles/colors/classes/all.css";

/* load assets */
import "@db-ux/db-theme-fonts/build/styles/[TYPE].css";
import "@db-ux/db-theme-icons/build/styles/[TYPE].css";

/* load theme */
import "@db-ux/db-theme-fonts/build/styles/index.css";

覆盖标题字体权重

标题字体船增加重量(light, (中文(简体) ), black, (中文(简体) ), wideextrablack) 在白标签默认值上. 导入 [TYPE].css 上面已经应用了它们.

类型脚本自动完成

要让 TypeScript 自动完成附加标题字体权重, 您需要包含类型 :

{
  "compilerOptions": {
    ...,
    "types": [..., "@db-ux/db-theme-fonts"]
  },
  "include": [
    ...,
    "node_modules/@db-ux/db-theme-fonts/build/types/overwrite.d.ts"
  ]
}

如果您有多个覆盖, 您也可以复制 overwrite.d.ts 进入您的 src 文件夹并添加其他类型.

德国Bahn品牌

由于我们想在数字化旅程中完全支持我们的用户和客户,使用德乙品牌和商标时,即使使用我们提供的该产品的代码,也会受到明确的准则和限制;德乙完全保留了对德乙品牌的所有权利,尽管我们提供了DB UX产品的代码,可以在Apache 2.0许可下自由使用并发布. 请看看我们的品牌门户 https://marketingportal.extranet.deutschebahn.com/ 页面存档备份,存于互联网档案馆 就任何品牌问题与谁联系.

不允许您在Deutsche Bahn网站和应用程序之外使用此套件或其任何内容(如设计资产以及受保护的特征和商标等).

许可证

这个工程在特殊的Apache-2.0下获得许可,参见这个包中的LECENCE文件.