@fibrae/半创始人
Semi Design Next中的框架-不可知部分:组件逻辑(Foundation),SCSS风格,主题符号和地语包. 每个框架的组成部分库都共享。 应用程序通常通过一个UI包使用,而不是直接依赖.
基金会和适应者
每个组件的JavaScript有两个部分,因此可以跨框架再利用:
- 基金会:持有组件的业务逻辑和参考文献没有DOM. 需要DOM的逻辑授权给适配器.
- 适配器:一个基金会需要的方法的界面,由每个框架包与其原生机制(如回放钩或Vue可调配器)实施.
这就是为什么软件包依赖于没有框架或UI软件包.
安装
pnpm add @fibrae/semi-foundation
构建插件需要它来解决 semi: 地址,且用户界面软件包已经依赖它.
使用量
此软件包没有根项 。 这个 base, (中文(简体) ), utils 财务报告和审定财务报表 locale 目录各有一个条目来收集目录的出口. 其他模块由深文件路径导入, 将一对一映射到下面的目录中 src/。所有声明都包含类型:
import { BaseFoundation, FocusScope } from '@fibrae/semi-foundation/base';
import InputFoundation from '@fibrae/semi-foundation/components/input/foundation';
import type { Locale } from '@fibrae/semi-foundation/locale';
import { utcToZonedTime } from '@fibrae/semi-foundation/utils/date-fns-extra';
这个 utils 条目不包含日期模块date-fns-extra, (中文(简体) ), date-fns-locale, (中文(简体) ), zoned-time页:1 base 条目删除 base/env通过深道导入它们.
exports 还包括: ./*.css 财务报告和审定财务报表 ./*.scss。组件CSS由 vp pack。发布 .scss 包含 semi: 地址无法由 Sass 直接编译; 它会通过构建插件或 @fibrae/semi-scss-compile。 。 。 .
目录
| 目录 | 目录 |
|---|---|
components/ | 每个组件一个目录,包含 foundation.ts, (中文(简体) ), constants.ts 财务报告和审定财务报表 *.scss 视需要variables.scss, (中文(简体) ), mixin.scss 以及仅作为来源的类似船舶) |
base/ | BaseFoundation、普通常数和状态类构成一个基础(重点范围、弹出寿命周期、模式资源等) |
utils/ | 无国籍的公用设施: DOM、日期、焦点助手、层堆栈和类似 |
theme/ | 一个主题:全局符号、调色板和混音器,由组件SCSS通过加载 semi:theme |
locale/ | 语言包 Locale 财务报告和审定财务报表 LocaleInput 类型和每个框架共享的地方分辨率 |
语言包
src/locale/source/ 拿着两个内置包, zh_CN 财务报告和审定财务报表 en_US。每个文件默认导出a Locale。 。 。 . src/locale/index.ts 出口包和 Locale, (中文(简体) ), LocaleInput, (中文(简体) ), LocaleComponentName 财务报告和审定财务报表 LocaleResult 类型,以及从 @fibrae/semi-foundation/locale数字 :
code:语言代码. 日期组件从中选择日期 - fns locale(src/utils/date-fns-locale.ts仅建于zh-CN和en-US;其他来自ConfigProvider的dateFnsLocale) (中文(简体) ).currency: ISO 4217 货币编码,通过输入号传递到Intl.NumberFormat。 。 。 .- 其他密钥按组件分组,并持有内置文本和可访问名称. 值为
${name}是占位符;不要翻译占位符本身.
每个 UI 软件包导出 zh_CN 财务报告和审定财务报表 en_US 从其 locale 输入。 递一个给UI包 LocaleProvider 或者说 ConfigProvider数字 :
import { LocaleProvider } from '@fibrae/semi-ui-react';
import { en_US } from '@fibrae/semi-ui-react/locale';
<LocaleProvider locale={en_US}>
<App />
</LocaleProvider>;
两家供应商都使用自定义的打包 LocaleInput: 仅 code 需要,每个文本或 currency 它离开来自 en_US。 。 。 . src/locale/resolve-locale.ts 填补每包对象一次的空隙并再利用结果,因此创建了一次包(在模块级别上或被回忆)并取而代之,而不是在原地进行变异.
Vue 软件包 LocaleProvider 名字和名称相同 :locale。关于将文本或无障碍名称添加到两个内置包中,参见 语言文字。 。 。 .
相关软件包
- 取决于
@fibrae/semi-json-viewer-coreMarkdown、MDX、Lottie和代码的 框架不可知渲染逻辑 也在这里生活. - 每个框架的UI包使用,
@fibrae/semi-ai-foundation和AI组件包.
发展
pnpm --filter @fibrae/semi-foundation build 运行 vp pack数字 : src/**/*.ts 按文件发布无害环境管理和类型声明文件,组件SCSS编译到CSS,主题符号编译到 base/tokens.css。UI 包中的类型检查读取此处构建的类型.
一般命令见 捐款额 在寄存器根处。 对于如何写作风格 semi: 进口商和主题符号协议,见 QQ SCSS “, “ Sass QQ 半: 进口商” 和 QQ 符号 样式。 。 。 .