@ epilot/ zenith- react
用于 Zenith 的可访问 React 组件,其样式为 Griffel 并设计用于 独立微前端交付.
安装
npm install @epilot/zenith-react
@epilot/zenith-runtime 安装它; 除非主机, 不覆盖它
服务相同的 /v1 ABI (英语). 捆绑者配置外部化的应用程序
@epilot/zenith-runtime/v1 从主机获得运行时间( root- config in the
门户:保持外部,不要添加、固定或捆绑自己的运行时间.
托肯斯是建造的,所以没有第三个包裹. 反应和反应 DOM 18 或
新的是同龄人.
Zenith是一个普通的每个应用依赖,而不是通过一个 共享组件- 图书馆导入图.
渲染器
import { Button } from "@epilot/zenith-react"
export const Example = () => <Button variant="primary">Continue</Button>
没有设置步骤: 组件安装其符号样式表 调制。 要在启动时安装它 :
import { prepareCoreTokens } from "@epilot/zenith-react/delivery"
await prepareCoreTokens()
可选;无网.
需要设计令牌的应用程序样式从
@epilot/zenith-react/tokens。不要将符号 CSS 添加为第二个样式表,
而不写入生成的 --zenith-<hash>-* 以手取名.
拖放重排顺序 List 是一个单独的条目,所以应用 使平原
List 不捆绑 dn- kit :
import { ListItem } from "@epilot/zenith-react"
import { SortableList } from "@epilot/zenith-react/list/sortable"
天顶船没有 .css 文档及其 exports 地图没有样式表条目 :
没什么可进口的。 从伏特港出发,放下它 style.css, (中文(简体) ),
preflight.css 财务报告和审定财务报表 font.css 进口和不添加替换——代号CSS
上面是唯一的样式表,软件包自行安装.
使用 AppearanceBoundary 范围化外观,也必须达到门户
内容——子树上的主题或表面属性不遵循对话框,
弹出、 选择、 工具提示或菜单 document.body。 。 。 .
自己开屏
天顶船组件,不是布局系统:没有 Grid, (中文(简体) ), Stack, (中文(简体) ),
Box 或者说 Spacer永远不会有。 组件之间的间距是
属于你的.
makeZenithStyles 实值 为此公开的API,从
软件包根并列 mergeClasses 财务报告和审定财务报表 shorthands。这是同样的格里菲尔
API Zenith自己的组件使用,所以您的布局将它的CSS与您的
组件,并依赖于没有从其它地方装入的样式表.
import { makeZenithStyles, shorthands } from "@epilot/zenith-react"
import { spacingLayout1, containerXl } from "@epilot/zenith-react/tokens"
const useStyles = makeZenithStyles({
page: {
display: "flex",
flexDirection: "column",
maxWidth: containerXl,
...shorthands.gap(spacingLayout1),
},
})
从 @epilot/zenith-react/tokens。一个字形十六进制,一个工具
类,来自另一个样式表,或原始像素值是屏幕如何漂移的
离开系统,停止跟随一个符号变化.
一个实用级的框架也起作用,但理解你所依赖的是: 这些课来自一个样式表 您的组件不载运 屏幕看起来像是由样式表的任意版本决定的 部署在旁边.
验证主机
- 根据其实际内容安全政策实施应用程序.
- 打开并关闭每个传送门组件 .
- 测试键盘顺序,焦点恢复,屏幕阅读器名称和出错状态.
- 测试两个独立捆绑的Zenith消费者 在一页,这是一个 支持的主机情景 .
- 测量实际进入和懒散块.
故意迁移
一次移动一面. 不重用自定义属性名称, 样式 选择器或来自另一个组件系统的内部DOM结构。 API 在何处 不同的,在应用程序边界上调整,一旦 表面完全在天顶上.
连接 MCP 客户端
Zenith 的只读模式上下文协议服务器动态运行
文档网站 /api/mcp它服务于组件API,设计符,
并直接为AI编码工具设计指南.
该目录由当前承诺构建 latest 释放是
所以它准确地描述了 npm install @epilot/zenith-react
安装——而不是未释放的工作 main。 。 。 .
将 MCP 客户端( 如 Cursor 或 Claude) 指向可流 HTTP 端点 :
{
"mcpServers": {
"zenith": {
"url": "https://zenith.epilot.cloud/api/mcp"
}
}
}
所有查询和工具严格只读,不需要全权证书.
探员
Zenith的技巧教一个编码代理使用上面的MCP;"编码代理" 文档页面列出其模式。 在克洛德码中,一个插件安装了 技能和 MCP 连接 :
claude plugin marketplace add https://gitlab.com/e-pilot/product/frontend/zenith.git
claude plugin install zenith@zenith
然后运行 /zenith:build <screen> 或者说 /zenith:review对于Codex, Cursor, , , , , ,
副驾驶和OpenCode,将技能安装到
npx skills add https://gitlab.com/e-pilot/product/frontend/zenith --skill zenith
并添加到代理配置中的 MCP 端点。 "编码特工"
页面中的文档设置部分有每个代理的阶梯.
你得到的哪个版本
npm install @epilot/zenith-react 决定 latest 三角形, 即
手动; 自动 next 建立永不移动 latest。 。 。 .
未经证实的建筑 next 预发版本:
npm install @epilot/zenith-react@next
这些是两回选入——你给标签起名,范围像 ^0.1.0 永远
解决了预先释放。 如果你采纳了精确的版本.
升级至0.2.0
0.2.0 将每个家族从拉迪克斯搬到基地UI,并为原始人服务
运行时间。 文档设置部分"升级为0.2.0"的页面
有步骤顺序 : 主机首先服务新运行时间( 与 react 财务报告和审定财务报表
react-dom 外部, 冲击包, 运行 radix-to-base-ui 代码
(它的输出通过您的 Pretier ),运行迁移扫描,添加测试
设置、 检查属性重命名, 并保留两个规则
混合了Volt 1.x和天顶.
参考文献
一揽子措施只采用无害环境管理,而且可动摇树木。 已解析的字元值为
@epilot/zenith-react/tokens.json用于测试, @epilot/zenith-react/testing/setup.cjs
联合国 PointerEvent jsdom 26岁及以上, Vitest 和 Jest) 以及可选的 Jest 助手
@epilot/zenith-react/testing/jest-preset.cjs。 。 。 .
文件网站载有组成部分参考、准则和实例 与上面的MCP端点相同的目录。 发展和缴款规则 住在仓库里.