@ferrlabs/ ui- foundation (英语)
框架-不可知FerrLabs设计基础. 捆绑在一起,什么是
原为三个独立的包件(@ferrlabs/ui-icons, (中文(简体) ),
@ferrlabs/styles, (中文(简体) ), @ferrlabs/ui-tailwind所以消费者安装一个
包而不是三个。 在UI#105下被跟踪.
这里面是什么
| 子路径 | 什麽 | 用于 |
|---|---|---|
@ferrlabs/ui-foundation/icons | SVG 图标设定为原始字符串( Luide- inspirted strike 图标) | 反应 + Astro |
@ferrlabs/ui-foundation/styles/global.css | 基础样式表 — 字体 + Tailwind 导入 + 品牌标志 | 每个应用程序 global.css |
@ferrlabs/ui-foundation/styles/tokens.css | 品牌颜色 + 印刷符号(通过 @theme(中文(简体) ) | 应用程序/网站 |
使用量
反应应用程序
import { icons, type IconName } from '@ferrlabs/ui-foundation/icons';
/* app/src/index.css */
@import '@ferrlabs/ui-foundation/styles/global.css';
天体站点
---
import { icons } from '@ferrlabs/ui-foundation/icons';
---
<div set:html={icons.shield} />
/* site/src/styles/global.css */
@import '@ferrlabs/ui-foundation/styles/global.css';
半径符号
| 脚本 | 数值 | 尾风工具 | 使用 |
|---|---|---|---|
--radius-control | 四进制 | rounded-control | 按钮、输入、选择、搜索、标签、小芯片 |
--radius-card | 8个px | rounded-card | 卡片、菜单、弹出器、铁道物品 |
--radius-modal | 12px 时速 | rounded-modal | 模块、切换面板、大表面 |
--radius-full | 999px (英语) | rounded-full | 切换、外观、徽章、状态点 |
.btn-primary 财务报告和审定财务报表 .btn-ghost 使用情况 --radius-control。 。 。 .
旧套件的迁移
旧的套件(@ferrlabs/ui-icons, (中文(简体) ), @ferrlabs/styles, (中文(简体) ),
@ferrlabs/ui-tailwind继续作为再出口贝壳在
过渡窗口 — 以您自己的速度更改导入 。 新消费者
应瞄准 @ferrlabs/ui-foundation 直接说.
许可证
根据其中任何一项颁发的许可证 阿帕奇 - 2.0 或者说 麻省理工学院随便你.
Fraunces和DM Mono字体不在本许可范围内. 他们被拉进来了 @fontsource/fraunces 财务报告和审定财务报表 @fontsource/dm-mono 根据SIL Open Font License 1.1 的附属关系和保留,其中每个软件包的文本载运.