@ allfitone/ 反应
Allfit One基金会的React and Next.js适配器. 导入明显的子路径, 因此应用程序只包含它们使用的能力 .
import { BrandLockup, ProductLockup } from "@allfitone/react/brand";
import { BackIcon, FoundationIcon } from "@allfitone/react/icons";
import { semanticColor } from "@allfitone/react/tokens";
import "@allfitone/react/tokens.css";
import "@allfitone/react/app.css";
import "@allfitone/react/styles.css";
import { Button } from "@allfitone/react/components/button";
import { Dialog } from "@allfitone/react/components/dialog";
import { AnimatedBrandLockup } from "@allfitone/react/components/animated-brand-lockup";
<ProductLockup product="studio" surface="dark" title="Allfit Studio" />;
入境点
@allfitone/react/brand:可访问的主品牌徽标外加空间,工作室,后台SVG文字标记和共享-logo锁定组件.@allfitone/react/icons:语义学Lucide图标组件和图标元数据.@allfitone/react/tokens: 键入平台中性符号值.@allfitone/react/tokens.css: 生成了Web令牌变量和主题选择器.@allfitone/react/app.css:应用程序画布,浏览器重置,和产品-font桥.@allfitone/react/styles.css:编译了Tailwind 4组件公用事业和AllFIT One shadcn桥.@allfitone/react/components/*: 明显的组件分路口;没有全组件管.@allfitone/react/lib/utils: 公开cn类组合工具.
包根只包含平台元数据. 这样做可以防止意外的大部件进口,并保持捆绑分析的可预测性.
构成部分合同
构件API遵循了Base UI上的shadcn组成,而其视觉变体,指针,目标尺寸,焦点处理,以及可访问性默认属于ALLFIT One. 在此顺序的应用程序根导入 CSS 一次 : tokens.css, (中文(简体) ), app.css,则 styles.css更改主题 data-afo-theme="dark|light" 文档元素.
app.css 将应用程序级别的视觉决定保留在设计系统中。 装入字体的产品 next/font 应使生成的姓氏暴露为 --afo-app-font-display 财务报告和审定财务报表 --afo-app-font-body数字 :
const display = Barlow_Condensed({
subsets: ["latin"],
variable: "--afo-app-font-display",
weight: ["500", "600", "700"],
});
const body = Manrope({
subsets: ["latin"],
variable: "--afo-app-font-body",
});
可用的公共组件子路径有:
- 动作 :
button财务报告和审定财务报表icon-button· ; - 导航 :
breadcrumb, (中文(简体) ),navigation-menu, (中文(简体) ),dropdown-menu, (中文(简体) ),pagination, (中文(简体) ),drawer, (中文(简体) ),sidebar, (中文(简体) ),workspace-shell, (中文(简体) ),setup-shell,以及command· ; - 条目 :
access-shell用于响应性强、由品牌主导的认证和产品输入网页,setup-shell多步骤激活和登入,device-gate用设备指导取代紧凑的电话工作空间,以及site-shell公共产品网站共用标题和页脚; - 窗体:
field, (中文(简体) ),label, (中文(简体) ),input,以及textarea· ; - 选择 :
checkbox, (中文(简体) ),radio-group, (中文(简体) ),switch, (中文(简体) ),toggle-group, (中文(简体) ),select, (中文(简体) ),combobox, (中文(简体) ),date-picker, (中文(简体) ),time-picker, (中文(简体) ),calendar, (中文(简体) ),tabs,以及choice-card· ; - 数据显示 :
table, (中文(简体) ),data-table, (中文(简体) ),avatar, (中文(简体) ),badge, (中文(简体) ),card, (中文(简体) ),skeleton,以及empty· ; - 签名 :
accent-block, (中文(简体) ),stat-strip, (中文(简体) ),tick-ring, (中文(简体) ),pulse-mark,以及animated-brand-lockup· ; - 覆盖 :
dialog, (中文(简体) ),alert-dialog, (中文(简体) ),sheet, (中文(简体) ),popover, (中文(简体) ),tooltip,则CommandDialog来自command· ; - 反馈 :
progress, (中文(简体) ),alert, (中文(简体) ),sonner,以及spinner· ; - 组成:
collapsible财务报告和审定财务报表separator。 。 。 .
没有所有部件的管子。 从其明确的组件导入 @allfitone/react/components/{name} 子路径.
SetupShell 拥有响应头、 进度列表、 舞台和分页
用于激活和设置流的分级. SetupProgressStep 获取其
已完成图标和 aria-current 状态从 status;产品仅提供
索引和标签。 使用 SetupPanelTitle as="h2" 当面板坐落在
现有页面标题.
ChoiceCard 是一个交互式表面,默认情况下作为按钮提供,或
结束 render 导航 编写其眉毛、标题、描述和
内置动作槽; 不在
纸牌.
正在装入动作 Spinner 在禁用状态内 Button; 组件不显示 isLoading 道具 (英语). 只使用图标的动作 IconButton,其类型脚本合同要求 aria-label。 。 。 .
Table 曝光情况 comfortable 财务报告和审定财务报表 compact 保持本地密度
表格语义。 使用 scrollAreaLabel 当预计水平溢出时
键盘用户可以到达滚动区域. 排序用
aria-sort 打开 TableHead 和视觉中性 TableSortButton; 选中
行对齐 selected 名称 Checkbox,以及 TableState 提供装入,
空和错误的构成 .
DataTable 以那些原始人为基础 拥有坦斯塔克动力的无头层.
创建实例 useDataTable,然后作曲 DataTableToolbar, (中文(简体) ),
DataTableFilterInput, (中文(简体) ), DataTableViewOptions, (中文(简体) ), DataTableSelectionBar,以及
DataTablePagination 视需要而定。 通过 TanStack state 财务报告和审定财务报表 on*Change 选项
来控制排序、过滤器、能见度、选择和从a到a的页码
服务器支持的产品屏幕.
Avatar 在图像加载和失败中保持身份清晰。 名称
根为 aria-label 或者说 aria-labelledby,包括 AvatarFallback,并使用
decorative 仅在等同的可见身份文本旁。 存在状态对数
带有显著图标和标签的语义颜色; 群体暴露其剩余
成员数入为出.
Command 过滤键盘-第一个工作空间目的地和行动并进行排序.
给根一个描述 label,编译一个命名的输入,分组的项目,
快捷键和空状态,并提供稳定的项目值. CommandDialog
使用公共对话框焦点合同中的相同命令孩子
而不是引入单独的全局搜索 API。 当一个受控全球
快捷键打开对话框而无需 DialogTrigger,保留引用要素
{\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}在裁判室里 交给你 finalFocus。 。 。 .
ToggleGroup 由2到7个紧凑的按键组成,用于模式、地方、,
或者过滤选择。 内容 value, (中文(简体) ), defaultValue,以及 onValueChange 合同
总是在单数组和 multiple 模式。 给每组一个
可访问名称。 单个组在活动项目时可以返回空数组
; 消费者,如需要一个值的地方切换器
必须拒绝这种空洞的改变。 使用 Tabs 当选择控制面板和
RadioGroup 当必须提交一个表格值时.
Combobox 过滤预先定义的项目收藏并支持单项或多项
选择、 组合丰富的选项、 可移动芯片、 以及自动加载、 空的和
错误消息 。 保留 ComboboxStatus 安装并更新儿童时
远程请求更改状态 。 对于同步收藏, 保留所选项目
输入 items 数组使其标签仍然可用.
Calendar 作曲 React DayPicker 用于单个日期和范围. 其公众
支持可控选择、 禁用匹配器、 语言和时区
配置,多个响应月, 和犬科44px日期网格.
导入 DateRange 财务报告和审定财务报表 Matcher 类型来自同一组件子路径.
DatePicker 围绕一个控件组成一个输入字段、 Popover 和 Calendar
或无控制 Date | undefined 数值。 它保持其公认的格式可见,
校验已键入的日期和已禁用的日历匹配器,并曝光无效的文本
或无状态,不需要在
产品. formatLabel 命名产品语言中的可见格式.
TimePicker 是DatePicker一天的对应时间。 它的价值是一个
HH:MM 24小时时钟上的字符串,没有日期或时区;产品结合
与两者。 时间可以打入,也可以从提供的列表中选择 step
分钟,在当前时间打开,然后按箭头移动,页(一个小时),
家和端的钥匙。 每个可见和公布的词都是道具.
Alert 提供 info, (中文(简体) ), success, (中文(简体) ), warning,以及 danger 挂载
自动语义图标,标题,描述,和可选动作. 静态
调用默认情况下保持沉默; 使用 live="polite" 用于更新状态或
live="assertive" 在运行时插入紧急故障.
Progress 以其轨迹和指标构成一个可见的标签和值.
使用 value={null} 用于不确定的操作,以及成对域特异性
可见值为 getAriaValueText编辑 full 财务报告和审定财务报表 compact 变量共享
在同一语义上,在启用减速运动时保留静态信号.
AnimatedBrandLockup 是 Cononical Allfit One 的选入网页入口
关起来 它演奏一次,当请求减少运动时, 使最终框架,
并可以通过更改重放 replayKey静态品牌消费者应保持
使用 BrandLockup 从 @allfitone/react/brand。 。 。 .
DeviceGate 对于需要平板电脑或
桌面工作空间。 在紧凑倒计时前完成 DeviceGateContent。 。 。 .
使用 DeviceGateActions 产品自主回收行动,如复制a
工作空间链接; 槽提供了响应性布局,但没有拥有剪贴板,
电子邮件,QR,或导航行为. 打开可读取的倒置名称
DeviceGateMain 因此,它的可见 main 仍然是最高一级的地标.
倒置取代下面的产品内容 600px 宽而粗的指针
下方的地貌视图 600px 高; 没有用户代理检测或客户端
需要水分补充。 时 600px 平板电脑内容
可用.