@jocoding-ax-partners /反应
共享的React组件 CodeBlock， ConfirmProvider/useConfirm， HoverReadout，
Input， List， Pagination， SearchBox， SidePanel， Skeleton， StatCard，
StatusDot， NavItem， NavList， Sidebar， TopBar， AppHeader， Breadcrumbs， PageHeader，
PageContainer， TabNav， KpiStatBar， KpiSearchButton -加a cn 助手,
情况下 @heroui/react 没有等价的。除了 Breadcrumbs 都是从
axhub-frontend。
NavItem， NavList， Sidebar， TopBar， PageHeader， PageContainer, TabNav
是AxHub的导航外壳，规范化-相同的类字符串和相同的标记
他们被提升的组件。
Breadcrumbs 是 这是新产品，不是促销：轴前侧无
面包屑路径组件。它取代了手卷 .breadcrumbs BEM阻断APTA
携带和使用与上述组件相同的设计令牌构建。
它们都不依赖于任何路由器——消费者注入自己的路由器 Link 通过一个
renderLink 并通过它们的API形状来强制可访问性
公约: NavItem 如果没有给出则抛出 href 也不 onSelect，所以。
非交互式 <div onClick> 不能用它来构建导航项。
安装
npm install @jocoding-ax-partners/react @heroui/react@^3 @phosphor-icons/react@^2 react@^19 react-dom@^19
所需的设置：添加一个顺风 @source
这些组件在其源代码中使用Tailwind实用程序类进行样式化，而不是
预编译的CSS。Tailwind v4只有在找到正确的情况下才会生成实用程序
类名在它扫描的文件中 顺风不扫描 node_modules 由
默认的。没有告诉它，类喜欢 h-1.5， bg-success-strong，
text-[12px], tracking-[0.04em] 都是默默的掉落，每一次
组件在此包中呈现无样式(例如： StatusDot点崩溃
来 0×0， CodeBlock 呈现为未样式的黑色文本)。
将这一行添加到您的顺风CSS条目文件中 @import "tailwindcss"：
@source "../node_modules/@jocoding-ax-partners/react/dist";
路径必须指向包的安装位置 node_modules
（调整引线） ../ 段来匹配你的CSS文件的位置)-那
是Tailwind将跳过的目录。
使用
import { StatusDot } from "@jocoding-ax-partners/react";
<StatusDot tone="active">Active</StatusDot>;
应用程序标题（GNB）和帐户菜单
AppHeader 是APTA和AxLMS共享的全宽度产品标头。它包装
TopBar徽标和顶部菜单进去 leading, trailing 槽(通知
铃声，主题切换)和帐户按钮进去 actions.
import { AppHeader } from "@jocoding-ax-partners/react";
<AppHeader
logo={<Logo />}
nav={[
{ label: "Dashboard", href: "/", active: true },
{ label: "Help", href: "/help" },
]}
user={{ name: "Sky Kim", email: "[email protected]" }}
accountItems={[
{ label: "Account settings", href: "https://acme.axhub.ai/settings/profile", external: true },
...(canAdmin ? [{ label: "Admin", href: "/manage" }] : []),
]}
onLogout={hubLogout}
renderLink={(props) => <Link to={props.href} {...props} />}
trailing={<ThemeToggle />}
/>;
- 没有权限检查。 应用程序决定
accountItems通过;头 按照给定的方式呈现它们，后面跟着始终存在的注销项。 external在新窗口中打开的项目(target="_blank"，rel="noreferrer") - - -NavLinkRenderProps现在是可选的target/rel这是一种习俗renderLink必须转发。- 如果
onLogout返回一个Promise，注销项在挂起时被禁用 如果拒绝，则在菜单中显示一行错误。 - 帐户菜单是一个弹出窗口
md上面和下面的底部md。键盘 遵循WAI-ARIA菜单按钮模式（在第一项上输入/Space/↓open，↑on） 最后，↑/↓/Home/End移动，Esc关闭并返回焦点，Tab关闭)。 - 高度读取应用程序的
--gnb-h变量并回落到--topbar-height;这个 包没有添加新的令牌。顶部菜单隐藏在下面md.
可选的ag网格外壳
只有当应用渲染数据网格时才安装Community包：
npm install ag-grid-community@^36.1.0 ag-grid-react@^36.1.0
从专用子路径导入，这样根包消费者就不会加载ag-grid：
import { AgDataGrid, useGridColumnState } from "@jocoding-ax-partners/react/ag-grid";
const gridState = useGridColumnState("members-grid.ag");
<AgDataGrid isDark={theme === "dark"} columnDefs={columns} rowData={rows} {...gridState} />;
isDark 是显式的，因为包不拥有消费者的主题商店。