@fayz-ai/ ui (英语)
半径+ 尾风原始人 CRUD引擎,每个Fayz应用都穿的管理员外壳.
状态 : β-发布至npm并在整个法伊兹狗食应用. 事前1.0:小API在1.0之前可能会有变化.
一个由Fayz组成的应用程序需要看起来像一个产品,而不是一堆插件. @fayz-ai/ui 是使这个事实真实化的设计层:可访问的 Radix 备份原始文件,一个数据表,布局外壳(app shell, sidebar, 模块页面),一个可主题符号系统,以及一个将插件贡献出KPI,图表和表格的仪表盘部件包. 沙龙,餐厅,诊所——同壳,同部件,同品牌.
哲学:插件描述行为,UI使其一致. 定义一个 KPI 部件一次, 它降落在仪表板网格中, 其布局、 范围以及定制已接通线路 。 进来 AppShell 财务报告和审定财务报表 Sidebar 并显示一个刚刚宣布的插件 .
里面的东西
- 初级 按钮、输入、徽章、卡片、相机、工作表、下拉、选择、标签、工具提示、波波弗,
DataTable(TanStack),收录框, DatePicker, TimePicker, 搜索选择, 货币输入, 确认Dialog, 分块控制, 土司(sonner(中文(简体) ) - 版式 —— 说
AppShell, (中文(简体) ),Sidebar, (中文(简体) ),Topbar, (中文(简体) ),ModulePage, (中文(简体) ),SubpageHeader, (中文(简体) ),SaveBar,页面转换,以及模块头/后按钮槽 - 纸板包 —— 说
DashboardCanvas, (中文(简体) ),WidgetGrid, (中文(简体) ),DashboardGrid,范围控制,以及defineKpiWidget编号 :defineChartWidget编号 :defineTableWidget编号 :defineOnboardingWidget编号 :defineCustomWidget与KpiCard, (中文(简体) ),ChartWidget, (中文(简体) ),TableWidget - 主题 —— 说
ThemeProvider, (中文(简体) ),useTheme, (中文(简体) ),createFayzTheme, (中文(简体) ),fayzThemePresets,轻/暗符号 - 存储 + 提用 —— 说
useLayoutStore, (中文(简体) ),useThemeStore, (中文(简体) ),cn阿凡达
安装
npm install @fayz-ai/ui
端点 : react, (中文(简体) ), react-dom (^18/^19), (中文(简体) ), tailwindcss (^3.4) (中文(简体) ). 导入 @fayz-ai/ui/styles.css。 。 。 .
使用量
import { Button, KpiCard, defineKpiWidget } from '@fayz-ai/ui'
import '@fayz-ai/ui/styles.css'
export const revenueWidget = defineKpiWidget({
id: 'revenue',
title: 'Revenue',
value: { format: 'currency', amount: 12400, currency: 'BRL' },
})
export function Demo() {
return <Button variant="default">Save</Button>
}
费兹SDK的一部分
顶部的演示文稿层 @fayz-ai/core; 管理员在 @fayz-ai/admin 它是从它建造的.
路线图贡献( I)
建设并不断发展于开阔. 见 费兹SDK路线图 对于当前空白,缺失的特征,以及良好的第一问题.