SuperAPI AI 工具集

tailwind-dashboard

前端与建站

查看项目

更新于 10-16 03:17

技能介绍

用途:该技能面向使用 Tailwind CSS 构建后台管理面板、数据表格、CRUD 界面、后台面板或管理控制台的场景,提供可参考的设计模式与类名约定。

主要能力:

  1. 数据表格:简单表格、复选框选择、排序、斑马纹、固定表头、可展开行、头像列、紧凑与响应式布局;含包装容器、表头、单元格、操作列等类名,以及列隐藏、横向滚动、堆叠卡片等响应式策略。
  2. CRUD 布局:新增/编辑用模态框或滑出抽屉,读取用详情区或只读抽屉,更新支持表单或行内编辑,删除需确认弹窗;含批量操作栏与空状态。
  3. 筛选与搜索:表格标题搜索框、下拉筛选、侧边分面、行内筛选、筛选标签、日期范围;规定 300ms 防抖、保留筛选、清除按钮与筛选计数徽标。
  4. 仪表盘导航:顶部导航栏、侧边栏、可折叠分组、徽标计数,以及固定侧栏、可折叠侧栏、移动端抽屉、顶部加侧边组合、面包屑与选项卡等变体。
  5. 表单模式:模态框与抽屉表单布局、行内编辑、多步骤表单(步进器与连接线)。
  6. 反馈与状态:状态徽标配色、成功横幅自动消失、删除确认弹窗(可选输入实体名确认)、批量操作反馈。
  7. 仪表盘布局:统计卡片、活动流、快捷操作。
  8. 表格页脚与分页:页码、截断页码、仅上一页/下一页、加载更多、无限滚动,以及每页条数选择器。
  9. 抽屉/滑出:窄、中、宽、全宽变体,以及读取、创建、更新三类抽屉结构与过渡动画类。
  10. 常见反模式提示。

使用方式:作为 Tailwind CSS 项目编写后台界面时的模式参考,直接套用文中列出的类名组合;基础 Tailwind 模式参见 tailwind-guidelines。

适用场景:管理后台、数据密集型表格、增删改查页面、后台控制台。

限制:资料未提供安装命令、代码运行环境、框架绑定、价格或效果保证,具体实现需自行判断。