返回主题列表

无障碍 Astro 仪表盘

一个适用于 Astro 的无障碍管理仪表盘主题,包含登录页面和仪表盘概览。包括地标、更佳的焦点轮廓和跳过链接导航等无障碍功能。


价格

免费


创建者
Mark Teekman

一个现代的、注重无障碍功能的仪表盘模板,使用 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 包也已预装,可应用于不同的用例

快速开始

  1. 克隆仓库或用作模板
  2. npm install 安装依赖项
  3. npm run dev 在 localhost:4321 启动本地开发服务器
  4. npm run build 将您的生产站点构建到 ./dist/
  5. npm run preview 在部署前,在本地预览您的构建


阅读文档了解更多 🚀