@alfadocs/ui-kit (英语)
阿尔法道克设计系统——反应组件,符号,和翻译.
释出. 破坏改变土地在主要领域 变动情况。 。 。 .
安装
npm install @alfadocs/ui-kit
需要反应 18+ 和节点 22.6.
源地图( 可选)
默认 @alfadocs/ui-kit 无防弹船 .map 要保存的文件
安装小型(4.6 MB tarball / 17.3 MB 已拆卸,而9.5 MB / 36.8 MB )
用于调试构建). 浏览器仅当
devtools是开放的,所以终端用户不支付这个成本不管.
如果您需要符号化的堆栈痕迹( Sentry / Rollbar上传, 内浏览器)
调试工具箱内部,安装 -debug 而不是兄弟俩 两者
软件包为运行时间- 相同和版本锁定 :
// package.json — alias-install so imports still resolve as @alfadocs/ui-kit.
// Pin the exact version you already have installed, not a range: maps from a
// different release point at lines that have moved.
"@alfadocs/ui-kit": "npm:@alfadocs/[email protected]"
或者作为一个单独的 dev- only dep, 如果你的错误报告员接受一个地图 兄弟姐妹的包裹.
永远不要犯别名——它改写了锁文件,所以 npm ci 将拉动
调试构建到生产图像中 。 见"史记"-"三十. 调试——源代码
地图和调试包"全向导.
解决问题
npm install 失败 ETARGET No matching version found for @alfadocs/ui-kit@<x.y.z> 尽管该版本存在于 npmjs.org
这几乎总是意味着你的 ~/.npmrc (或项目一级) .npmrc拥有一个
暂停 @alfadocs:registry= 线条指向其它位置
https://registry.npmjs.org/。 。 。 . @alfadocs/ui-kit 专门出版
(原始内容存档于2018-09-26). com.org 0.1.0 起; 键 @alfadocs gitHub 上的镜框
包只包含遗留 0.0.x 建造和保养.
刚才 0.1.x 同一检出范围内的凸起可以掩盖这个——npm再利用
解析的 tarball URL 从 package-lock.json 永远不要重新咨询
范围映射。 首个新决心(一个新的未成年人,一个干净的离职,一个
rm -rf node_modules)是死端浮出水面时.
修补. 打开 ~/.npmrc 删除任何 @alfadocs:registry=… 线条 - 或
设定为 npm 默认值,该值是多余但无害的:
@alfadocs:registry=https://registry.npmjs.org/
然后重新运行 npm install。 。 。 .
一发一发 (如果你不能编辑您的) .npmrc 现在:
npm install --@alfadocs:registry=https://registry.npmjs.org
使用量
键
在您的应用根导入设计符后, CSS 自定义 属性在任何地方都有:
import '@alfadocs/ui-kit/tokens';
这个完整的样式表包括所有四个第三方桥. 对于一个应用 仅使用工具包的一部分,选择核心并添加其组件所需的桥梁:
import '@alfadocs/ui-kit/styles/core.css';
import '@alfadocs/ui-kit/styles/ag-grid.css'; // DataTable
| 在核心后添加 | 需要它的组成部分和模式 |
|---|---|
@alfadocs/ui-kit/styles/ag-grid.css | DataTable, (中文(简体) ), PatientTable, (中文(简体) ), FileManager (列表视图),Heatmap的"View as table",和日历图案的表单 |
@alfadocs/ui-kit/styles/redactor.css | RichTextEditor 与东道主的 Redactor 运行时间, NotesPanel, (中文(简体) ), help-me-write-templates |
@alfadocs/ui-kit/styles/fullcalendar.css | Calendar, (中文(简体) ), CalendarWorkspace 和日历图案 |
@alfadocs/ui-kit/styles/apexcharts.css | Chart, (中文(简体) ), Sparkline,并比较面板和演化网格 |
任何制造这些部件的其他部件 都需要同样的桥梁.
选择其中之一 tokens 或核心加所需桥梁。 核心保留全部
符号、主题、基本规则、组件公用事业和工具包字体声明.
取相和订相组件不需要桥. 供应商 Java 脚本和
仍然像以前一样安装或提供可选对等依赖.
先装入核心从而建立CSS层顺序. 如果复制已构建
样式表,保留在 fonts/ 目录, 如 tokens.css。 。 。 .
然后在根元素上应用一个主题类:
<html class="theme-light">
<!-- or theme-dark, optionally combined with theme-accessible -->
</html>
构成部分
每个组件也可作为自身子路径导入,用于: 更窄的捆绑 :
import { Button } from '@alfadocs/ui-kit/button';
import { Card } from '@alfadocs/ui-kit/card';
export function Example() {
return (
<Card>
<Card.Body>
<Button intent="primary">Save</Button>
</Card.Body>
</Card>
);
}
或从根入入出一切:
import { Button, Card } from '@alfadocs/ui-kit';
i18n (英语)
装箱的船 react-i18next 预配置和本地化捆绑
内 dist/locales/数字 :
import i18n from '@alfadocs/ui-kit/i18n';
import en from '@alfadocs/ui-kit/locales/en.json';
i18n.addResourceBundle('en', 'ui', en);
东道国一体化
工具箱的可忽略的原始人—— Dialog, (中文(简体) ), Popover, (中文(简体) ), DropdownMenu, (中文(简体) ),
Tooltip, (中文(简体) ), Select, (中文(简体) ), ContextMenu, (中文(简体) ), NavigationMenu, (中文(简体) ), AlertDialog —— 说
都建立在Radix的上层 @radix-ui/react-dismissable-layer,该附件
气泡相间 pointerdown 收听器打开 document 以检测外部
点击。 正在结束应用程序 绝对不能 记录抓取相
document (或 body()收听者打电话 event.stopPropagation() 打开
pointerdown 编号 : mousedown 编号 : click ——抓捕阶段消费者运行
在拉迪克斯的探测器被饿死之前 上面的线被卡住了.
// Will break every dismissable primitive in the kit
document.addEventListener('pointerdown', (e) => e.stopPropagation(), true);
如果遗留的脚本必须拦截指针事件 document 职等
(j查询插件,靴子模式,内部全局菜单处理器等):
- 将收听者限定为特定容器,而不是
document编号 :body。 。 。 . - 放下枪
useCapture: true旗帜——气泡相听者向ATER Radix开火而不要干涉. - 放下枪
stopPropagation()如果它没有负载,请打电话.
每个可删除的组件的"故事书"页面都包含一个 WithHostInterference
故事复制了诊断失败模式.
同伴依赖关系
react, (中文(简体) ), react-dom, (中文(简体) ), react-i18next, (中文(简体) ), i18next尾风CSS不是
需要消耗装具的部件
符号样式表显示 CSS 自定义属性, 您可以从中引用
你的风格.
许可证
业务来源许可证1.1 生产用途 允许;提供特许工作或其中很大一部分, 作为相互竞争的主机、嵌入式或再品牌设计系统或 组件-图书馆产品不是。 许可工作转换为 在 LICENSE 指定的更改日期上的 Apache 许可证 2.0 .
BUSL赠款以外的商业许可安排,联系人 阿尔法道克股份有限公司.