一个现代的、注重无障碍功能的仪表盘模板,使用 Astro 构建。该主题在设计时考虑了 WCAG 指南,提供了一个功能全面的管理界面,内置了无障碍功能。它包括一个响应式、键盘可访问的导航系统、身份验证流程,并与 Accessible Astro Components 无缝集成。该模板包含了示例页面、身份验证流程和自定义 404 页面,提供了启动您的无障碍管理仪表盘所需的一切。
(无障碍)功能
- 包含一个 login.astro 页面,其中包含使用 localStorage 的登录示例和一个单独的 LoginLayout.astro 布局
- login.astro 包含示例登录数据和凭据不正确时的警告通知
- 在 index.astro 页面中包含一个使用 DefaultLayout.astro 布局的仪表盘示例
- 包含多个管理页面示例,例如 media.astro、messages.astro、products.astro、settings.astro 和 users.astro
- Media.astro 组件用于图片,在 media.astro 页面中使用
- Pagination.astro 组件用于分页结果,在 media.astro 页面中使用
- DashboardWidget.astro 组件作为 index.astro 上仪表盘的示例
- EmptyState.astro 组件,可在尚无数据的页面上显示
- LoginForm.astro 组件,带有一个基本的无障碍登录表单和一些表单控件
- SkipLinks.astro 组件,可跳至主菜单或主要内容
- Navigation.astro 组件,带键盘可访问导航(方向键、Esc 键)
- 此组件是桌面端一个全面的侧边栏导航,具有展开或折叠选项
- 用户菜单宽度偏好存储在 localStorage 值中,以便在页面重新加载时保留
- 当视口宽度低于中等断点时,导航会自动切换到无障碍移动导航
- ResponsiveToggle.astro 组件,带有一个用于移动导航的无障碍响应式切换按钮
- DarkMode.astro 组件切换按钮,带有无障碍功能,可将用户偏好保存到 localStorage 中
- 404.astro 提供了一个自定义 404 错误页面,您可以根据需要进行调整
- .sr-only 工具类,用于屏幕阅读器专用文本内容
- prefers-reduced-motion 为开启此偏好的用户禁用动画
- 在深色和浅色背景下都有效的轮廓焦点指示器
- Accessible Astro Components 包预装了额外的组件,例如手风琴 (Accordions)、模态框 (Modals) 和通知 (Notifications)
- Nate Moore 出色的 Astro Icon 包也已预装,可应用于不同的用例
快速开始
- 克隆仓库或用作模板
- npm install 安装依赖项
- npm run dev 在 localhost:4321 启动本地开发服务器
- npm run build 将您的生产站点构建到 ./dist/
- npm run preview 在部署前,在本地预览您的构建
阅读文档了解更多 🚀