Dagster UI 组件库
该项目包含Dagster产品使用的核心React UI组件库.
虽然作为公用套件发布,但并不打算在Dagster代码之外使用,目前不支持公众消费.
塞姆弗用法可能不一致,新版本可能会被发布,在不发出警告的情况下突破更改.
使用量
1. 安装软件包.
yarn add @dagster-io/ui-components
请注意,库目前包含许多对等依赖. 一定要安装这些.
2. 添加字体样式
必要时,在应用程序根中添加字体样式,并在全局样式中使用.
如果您正在通过其他一些方式(例如Google Fonts API)导入字体, 您可能不需要这样做 .
import {FontFamily, GlobalInter} from '@dagster-io/ui-components`;
import {createGlobalStyle} from 'styled-components';
const GlobalStyle = createGlobalStyle`
* {
font-family: ${FontFamily.default}; /* Default font is Inter */
}
`;
const MyAppRoot = () => (
<>
<GlobalInter />
<GlobalStyle />
<div>
/* Your app */
</div>
</>
);
3. 进口部件
import {Box, Button, Color, Icon} from '@dagster-io/ui-components';
卷起积分指定了某些共同的组件被拆分成自己的捆绑,使消费者能将捆绑大小最小化并避免将整个库导入,因为其目前含有很多你可能不需要的复杂而沉重的组件.
如果您发现您输入的某个特定组件炸飞了您的建筑大小, 我们可以把它添加到 input 列表中 rollup.config.js 将它分成自己的捆绑.
4. 增加 " 蓝图 " CSS.
必要时,加入"蓝图CSS". 一些组件需要基本的"蓝图"风格. 许多人没有.
我怎么知道我是否需要蓝图?
- 检查您正在使用的组件是否生成了蓝图组件 。 如果是,则包括蓝图CSS.
- 如果您不确定, 请尝试渲染组件, 看看它的样式看起来是否破损 。 如果是这样,样式涉及
bp3CSS课,你需要蓝图CSS.
/* blueprint.css */
@import '@blueprintjs/core/lib/css/blueprint.css';
@import '@blueprintjs/icons/lib/css/blueprint-icons.css';
@import '@blueprintjs/select/lib/css/blueprint-select.css';
@import '@blueprintjs/table/lib/css/table.css';
@import '@blueprintjs/popover2/lib/css/blueprint-popover2.css';
import './blueprint.css';
export const MyAppRoot = () => ...;