V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
wsWmsw
V2EX  ›  分享创造

hanav 助你开发动画流畅、高可访问、键盘可控的导航栏

  •  1
     
  •   wsWmsw · 19 天前 · 509 次点击

    hanav 是我这几个月开发的 React 导航栏组件库,用它可以开发出用户体验优秀的导航栏。

    仓库/在线演示

    动画、高可访问和键盘导航是 hanav 的亮点,下面是演示动图。

    🍯 动画

    hanav 的动画可以很好地表达“内容展现的由来、切换的过程和消失的去向”。

    一个网页提供了一个导航栏,当鼠标悬浮在触发器按钮上、切换菜单、移出按钮,出现了丝滑的动画:菜单面板从导航栏内部平滑滑出,切换到另一个菜单时,面板的高度顺滑地变高或变低,并且菜单的内容像履带一样左移或者右移。选择了导航栏的自定义 y 轴动画选项、面板跟随选项、动态宽度选项后,出现了和之前不一样的动画:菜单面板以渐隐的方式出现,切换菜单时,面板会进行顺滑地位移,面板始终以菜单对应的触发器按钮为中心运动,并且面板的宽度是以动画形式变化的

    结合可访问性,hanav 提供了无动画的独立组件,用于当用户打开操作系统的“减弱动态效果”时,启用无动画版本导航栏。

    ♿️ 高可访问

    hanav 可以通过屏幕阅读器(辅助技术)访问,hanav 添加了一些有助于辅助技术访问的 aria 属性。

    在一个网站中打开苹果“旁白”,通过 Tab 聚焦导航栏中的元素,当聚焦到触发器按钮 hanav 时,旁白读出“hanav ,已收起,按钮”,通过 Escape ,焦点从菜单面板回到触发器按钮 hanav ,旁白读出“hanav ,已收起,按钮,Main ,导航”

    除了辅助技术导航,hanav 也提供专为移动端设计的独立组件,用于开发响应式设计页面。hanav 内部使用语义标签和原生控件,利于 SEO 和辅助技术导航。其它的,hanav 完全支持键盘导航。

    🎹 键盘控制

    hanav 支持自由切换鼠标、键盘访问,通过键盘 TabShift-TabEscape、空格、回车,即可访问。

    在一个网页中使用 Tab 和 Shift-Tab 导航,当聚焦导航栏触发器按钮时按下回车,焦点从按钮跳跃至菜单面板第一个元素,继续 Tab ,按钮到达面板里最后一个可聚焦元素,接着 Tab ,按钮又回到了第一个可聚焦元素,按下 Escape ,焦点从面板回到了触发器按钮。在面板展开时,通过鼠标点击面板,接着按下 Tab 或 Shift-Tab ,焦点会聚焦面板第一个可聚焦元素或最后一个可聚焦元素


    如果喜欢,尝试体验一下~然后标个 Star 支持推广一下吧~

    🌷🪻🌹🌻🌷
    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2862 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 12:49 · PVG 20:49 · LAX 04:49 · JFK 07:49
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.