@db-ux/db-主题角
我们在这个软件包里为 DB Apps 提供 db 主题角 。 由于法律问题,一些文件被加密。 要解密他们 你需要去 营销门户。 。 。 . 说明: 深链接不起作用,您需要在登录后再次点击链接.
您可以在页面上找到两个环境变量:
ASSET_PASSWORDASSET_INIT_VECTOR
在安装前 @db-ux/db-theme-icons 您需要创建 .env 文档并添加到您的 .gitignore后,将这两个变量添加到 .env 文档.
ASSET_PASSWORD=db-theme-icons
ASSET_INIT_VECTOR=db-theme-icons
这个 postinstall 脚本在内 @db-ux/db-theme-icons 软件包将为您解密文件。 如果解密对你无效(例如因为Git生命周期剧本,例如: postinstall,已失效,例如被 ignore-scripts 设置),您需要手动运行解密脚本(参见我们 “贡献”/“比较”文档 页:1 或者,你可以将这些节点脚本包含在生命周期脚本中.
说明: 你用得着
process.env.本地或CI/CD中将所需的环境变量传递到postinstall。 。 。 .
安装
说明: 阅读上面的免责声明:)
npm i @db-ux/db-theme-icons
用法纯正 svg
- 您可以从
node_modules/@db-ux/db-theme-icons/build/assets
用法为 @db-ux/core-components
导入
通过字体面来包含图标有不同的方式. 因此,您需要导入正确的 .css 文档。 根据您使用的捆绑程序, 有许多文件 :
relative.css: 无捆绑器absolute.css: 无捆绑器rollup.css数字 :vite, (中文(简体) ),rollupwebpack.css数字 :webpack
联合来文/TS
// main.[js|ts]
import "@db-ux/db-theme-icons/build/styles/rollup.css";
支助科
/* main.css */
@import "@db-ux/db-theme-icons/build/styles/rollup.css";
维特
您可能需要添加一个 resolve 内 vite.config.[js|ts]数字 :
import * as path from "node:path";
export default defineConfig({
...
resolve: {
alias: {
"@db-ux": path.resolve("node_modules/@db-ux"),
},
},
});
覆盖默认图标
覆盖默认图标 @db-ux/core-components 或者说 @db-ux/core-foundations 您需要导入 default-font.css数字 :
联合来文/TS
// main.[js|ts]
import "@db-ux/db-theme-icons/build/styles/default-font.css";
支助科
/* main.css */
@import "@db-ux/db-theme-icons/build/styles/default-font.css";
类型脚本自动完成
要获得 TypeScript 自动完成, 您需要包含类型 :
{
"compilerOptions": {
...,
"types": [..., "@db-ux/db-theme-icons"]
},
"include": [
...,
"node_modules/@db-ux/db-theme-icons/build/types/overwrite.d.ts"
]
}
如果您有多个覆盖, 您也可以复制 overwrite.d.ts 进入您的 src 文件夹并添加其他类型.
使用字体家庭
如果您想要使用字体家族, 您可以这样做 :
HTML 语言
<button class="db-button" data-icon="my_icon" data-icon-variant="db">
Test
</button>
角质
<db-button icon="my_icon" data-icon-variant="db">Test</db-button>
反应( V)
<DBButton icon="my_icon" data-icon-variant="db">
Test
</DBButton>
您可以通过将生成类型包含到 tsconfig.json数字 :
React:
{
"compilerOptions": ...,
"include": [..., "node_modules/@db-ux/db-theme-icons/build/types/react.d.ts"],
}
Vue:
{
"compilerOptions": ...,
"include": [..., "node_modules/@db-ux/db-theme-icons/build/types/vue.d.ts"],
}
德国Bahn品牌
由于我们想在数字化旅程中完全支持我们的用户和客户,使用德乙品牌和商标时,即使使用我们提供的该产品的代码,也会受到明确的准则和限制;德乙完全保留了对德乙品牌的所有权利,尽管我们提供了DB UX产品的代码,可以在Apache 2.0许可下自由使用并发布. 请看看我们的品牌门户 https://marketingportal.extranet.deutschebahn.com/ 页面存档备份,存于互联网档案馆 就任何品牌问题与谁联系.
不允许您在Deutsche Bahn网站和应用程序之外使用此套件或其任何内容(如设计资产以及受保护的特征和商标等).
许可证
这个工程在特殊的Apache-2.0下获得许可,参见这个包中的LECENCE文件.