FinStack 设计包
@finstack-com-public/design 给FinStack的产品一个印象: 设计符号,Lucide图标集,
a 组件库和图表主题。 它被Grizzbi,BI App和计算引擎所使用.
框架中立:
- 外观为CSS自定义属性外加基于类的CSS.
- 行为来源于小型平面DOM函数.
- 细回放包装器使相同的标记并调用相同的功能.
没有运行时的依赖性( React 是可选的对等点),并且每个文件的负载都是这样, 没有建设步骤.
安装
该工具包已公开出版 npmjs.com (英语)。它不需要符号和 .npmrc 条目 :
npm install @finstack-com-public/design
使用
import '@finstack-com-public/design/kit.css'; // layers, tokens, every block and the utilities
import '@finstack-com-public/design/fonts.css'; // Inter and Plus Jakarta Sans, self-hosted
打印到 PDF 负载的页面 fonts-print.css 改为 fonts.css:静态Inter和+雅加达桑斯
铬嵌入为TrueType. 包括页脚的打印食谱是
css/print.md。 。 。 .
<body class="fs-theme fs-light fs-compact">
<button class="fs-button fs-button--primary">Apply</button>
</body>
- 方案:
.fs-light, (中文(简体) ),.fs-dark或者说.fs-auto。 。 。 . 密度 :.fs-dense, (中文(简体) ),.fs-compact或者说.fs-comfortable。每根或任何.fs-theme岛. - 每块 CSS : 导入
css/layers.css先说css/tokens.css和块你 使用量(css/button.css(中文(简体) ). - 行为 :
@finstack-com-public/design/dom(单位:千美元)createMenu, (中文(简体) ),createTabs, (中文(简体) ),createDialog(中文(简体) ). - 反应 :
@finstack-com-public/design/react。 。 。 . - 图标 :
@finstack-com-public/design/icons。 。 。 . - 图表主题 :
@finstack-com-public/design/charts(与toEChartsTheme) (中文(简体) ). - 作为数据的插件 :
@finstack-com-public/design/tokens, (中文(简体) ),tokens.json财务报告和审定财务报表grid.json。 。 。 .
每个区块的标记,变体和状态 都在CSS旁边的用法说明中
(单位:千美元)dist/css/<block>.md) (中文(简体) ). 全部合同是 设计光谱数字 :
版本 : 符号名称、类名、文件路径和导出是公共 API。 虽然 工具箱是0.x,一个小版本可能会打破它们,而且 变动情况 这么说的.
开发
先决条件、命令和画廊(每个州的每一个街区,光和暗,3个) 密度)为 文献/非环境设置开始代理 从 一般事务人员(其他职等)。 。 。 .
许可证
麻省理工学院,看 自由主义。许可证不包括产品名称、标志或吉祥物: 贸易。Inter和Lucide图标数据保存自己的许可证: 见 第三次议会 NoTICES.md。 。 。 .