dbui 设计系统
Databricks 组件库.
用 dbui 启动项目
运行 npx @databricks/design-system 创建 Vite 或 Next.js 工程,或添加设计
系统到已有的 React 工程。 工具安装软件包和所需的对等器,配置
情感与全球风格,并增加编码代理指导.
新的项目包括一个浮取主题器,用于原始 Du Bois 主题(默认), dbui Base,
天才一号 和阴影中性近似 所有字体和浅/暗设置都包括在内;
在浏览器中坚持主题和外观选择。 对于已脚本运行,设置初始主题为
--theme dubois, (中文(简体) ), --theme base, (中文(简体) ), --theme genie-one,或 --theme shadcn。 。 。 .
共享模拟( Databricks 员工)
从上面创建的 Vite 项目中运行 npx @databricks/design-system share 上传到
SP2K 设计数据砖
内部模拟画廊
npx @databricks/design-system share --project "Onboarding redesign" --artifact "Intent modal" --note "First pass"
重播同样的 --project 财务报告和审定财务报表 --artifact 增加一个版本; --invite email[:role] 授权审查员访问.
它需要Databricks CLI签到E2狗粮
(单位:千美元)databricks auth login --host https://e2-dogfood.staging.cloud.databricks.com --profile e2-dogfood) (中文(简体) ). 运行它
--help 每一个选项.
复制页面模板
套件包括由shadcn/ui块画廊所启发的可编辑dbui页面模板. 由 dbui 设置的 React 项目运行 :
npx @databricks/design-system page-templates
npx @databricks/design-system add LandingPage
add 将捆绑的源复制到 src/page-templates/ 不替换已有文件.
每个模板也安装 PageTemplateMain.tsx, (中文(简体) ), workspace-shell.tsx,以及
workspace-shell-top-bar.tsx。未更改的共享帮助器会在后续安装上被再利用.
软件包包括12个页面布局; 运行 page-templates 以列出他们的PascalCase名称.
将复制的模板连接到您的应用程序中,并通过其槽提供内容 。 见
docs/agents-npm/common/page-templates.md 用于目录和使用指南.
地物标志
一些 dbui 组件在基于特性旗的执行间切换, 例如
databricks.fe.designsystem.useNativeButton。默认情况下,每个旗帜都使用此软件包的值
已经出版。 您可以调用 setDesignSystemFlags 在你的应用之前
首先使:
import { setDesignSystemFlags } from '@databricks/design-system/flags';
setDesignSystemFlags({
'databricks.fe.designsystem.useNativeButton': false,
});
createRoot(document.getElementById('root')!).render(<App />);
每通电话都会取代先前电话的覆接. dbui 忽略其类型 与旗帜不符,例如布尔旗的编号.
注意组件读取旗子时会渲染出并不会在旗子改变时重新发回,所以 在第一次渲染前设置旗帜.
使用 dbui 编码代理
这个包裹船 AGENTS.md,链接到关于设置、组件选择、主题、,
以及要避免的陷阱。 包含 @node_modules/@databricks/design-system/AGENTS.md 在您的项目代理中
说明.
代理指南还链接到可复制的页面模板.