@ ciramaciel/ dashboard- kit (英语)
每一个仪表板共享的组件: 表,空状态,加载状态, 破坏性确认和文字标记。 建于曼t罗.
安装
bun add @ciromaciel/dashboard-kit
端点 : @mantine/core, (中文(简体) ), @mantine/hooks, (中文(简体) ), @mantine/notifications, (中文(简体) ),
@tabler/icons-react, (中文(简体) ), react。 。 。 .
快开始
import { DataTable, EmptyState, AuthLoader } from '@ciromaciel/dashboard-kit'
function Projects({ rows, loading }) {
if (loading) return <AuthLoader />
return (
<DataTable
columns={[{ key: 'name', label: 'Name' }, { key: 'status', label: 'Status', hideBelow: true }]}
rows={rows}
getRowKey={row => row.id}
onRowClick={row => navigate(`/projects/${row.id}`)}
emptyState={<EmptyState title="No projects yet" description="Create your first one." actionLabel="New project" onAction={create} />}
/>
)
}
API 密码
| 导出 | 这是什么 |
|---|---|
DataTable • 妇女 TableSkeleton • 妇女 TableToolbar • 妇女 templateFor • 妇女 ROW_PADDING • 妇女 HEAD_PADDING | 表格、工具栏和等待状态 |
EmptyState | 空的——与"还装"不同 |
SectionCard • 妇女 Field • 妇女 FieldStacked • 妇女 CardActions | 区卡 |
PageHeader | 标题和面包屑b |
HoldToConfirmButton • 妇女 HoldToConfirmIcon | 可逆的破坏性确认 |
DeleteModal • 妇女 deleteTitleScale | 升级的顶部:可逆转的 握住这个. before 保持出路(备份) |
DangerZone | 门 DeleteModal 设置页面末尾 |
AuthLoader • 妇女 AuthScreen • 妇女 AUTH_LABELS • 妇女 AUTH_TEXTS | 当仪表盘不知道你是谁时 |
Wordmark | 标记,分为两个角色:variant="mark" 编号 : "label") (中文(简体) ). 名字来自道具 |
ZenLabel • 妇女 notify • 妇女 NOTIFICATIONS_PROPS • 妇女 NOTIFY_DESCRIPTION_CSS • 妇女 notificationTheme | 标签和通知 |
DashboardFrame • 妇女 SidebarShell • 妇女 SIDEBAR_WIDTH | 框架和侧边栏 |
MenuItem • 妇女 NavItem • 妇女 GroupLabel • 妇女 ResourceItem • 妇女 ActiveResource | 侧边栏的棋子 |
Metric • 妇女 CommandCenter | 第一个屏幕 |
PlanBanner | 记账旗:它警告,它永远不会挡住 |
SupportModal • 妇女 HealthRow • 妇女 useHealthCheck | 支助和健康 |
CardSkeleton • 妇女 ListSkeleton • 妇女 MoreResults | 装入和"再装入" |
Terminal • 妇女 TerminalOutput | 命令输出 |
usePaginatedList • 妇女 useDebounce • 妇女 useExclusiveModal | 钩子 |
这里面有什么
这是什么 同样的 穿过仪表板 属于产品的东西不包括在内——a 状态轻,货币规则。 分界线:如果一个仪表板必须更改 这个部件不是每个人的.
为什么没有建筑
该包发布源. 消费者是编辑JSX的Vite应用软件 从不举行仪式的依赖性——建设步骤只会产生什么 消费者已经知道如何生产。 一个少移动的部分打破.
链接
麻省理工学院 西罗·塞萨尔·马西埃尔