npm 包 vue-mixin-roving-tabindex 使用教程

介绍

vue-mixin-roving-tabindex 是一个 Vue Mixin，旨在为应用程序提供可访问的选项卡切换体验。

这个包提供了全部的 WAI-ARIA 规范下的选项卡切换逻辑，适用于任意类型的选项卡，包括传统的水平/垂直选项卡、抽屉式选项卡和导航菜单。

安装

--- ------- ------------------------- ------

使用

  1. 引入 vue-mixin-roving-tabindex：
------ ------------------- ---- ---------------------------
  1. 在组件中使用 RovingTabindexMixin：
------ ------- -
  ------- ----------------------
  ---- -- -
    ------ -
      ----------------- --
      ----- -
        - ----- ------- ------ ---- --
        - ----- -------- ------ ------ --
        - ----- ---------- ------ ------ -
      -
    -
  -
-
  1. 在模板中渲染选项卡：
----------
  -----
    ---- ------------ ---------------
      -------
        ------------ ------ -- -----
        ---------------
        -------------------------
        --------------------
        ---------
          ------ -----
          ---------------- ---------------- --- -----
        --
        -------------------------------- --- ------
        ------------------------------
        ----------
        -------------------------
      --- --------- -----------
    ------
    -----
      ----
        ---------
        ---------------------- --- --
        ---------------
        ------------
        -----------------------
      -
        ---- -------
      ------
      ----
        ----------
        ---------------------- --- --
        ---------------
        ------------
        -----------------------
      -
        ----- -------
      ------
      ----
        ------------
        ---------------------- --- --
        ---------------
        ------------
        -----------------------
      -
        ------- -------
      ------
    ------
  ------
-----------

选项卡类型

水平选项卡

水平选项卡是最简单的选项卡类型，所有的选项卡都在一个水平容器中。

---- -------------
  -------
    ------------ ------ -- -----
    ---------------
    -------------------------
    --------------------
    ---------
      ------ -----
      ---------------- ---------------- --- -----
    --
    -------------------------------- --- ------
    ------------------------------
    ----------
    -------------------------
  --- --------- -----------
------

垂直选项卡

垂直选项卡是所有选项卡以垂直方式排列，所有选项卡共享相同的宽度。

---- ----------- ----------------
  -------
    ------------ ------ -- -----
    ---------------
    -------------------------
    --------------------
    ---------
      ------ -----
      ---------------- ---------------- --- -----
    --
    -------------------------------- --- ------
    ------------------------------
    ----------
    -------------------------
  --- --------- -----------
------

抽屉式选项卡

抽屉式选项卡是垂直选项卡的一种变体，当选择一个选项卡后，对应内容抽屉打开，并覆盖下面的选项卡。开关按钮位于每个抽屉的顶部，点击该按钮将关闭抽屉。

---- ----------- -----------------
  -------
    ------------ ------ -- -----
    ---------------
    -------------------------
    --------------------
    ---------
      ------ -----
      ---------------- ---------------- --- -----
    --
    -------------------------------- --- ------
    ------------------------------
    ----------
    ------------------------------------
  --- --------- -----------
  ----
    ------------ ------ -- -----
    ---------------
    -------------------------
    ---------
      ----------- -----
      --------------------- ---------------- --- ------
      ---------------------- ---------------- --- -----
    --
    ---------------
    --------------------------------
  --- ----------- --------
------

导航菜单

导航菜单是一种具有下拉子菜单的垂直选项卡。当选择一个主菜单选项卡时，在下拉列表中显示子菜单。点击子菜单选项卡将自动关闭下拉菜单。

---- ----------- ------------
  -------
    ------------ ------ -- -----
    ---------------
    -------------------------
    --------------------
    ---------
      ------ -----
      ---------------- ---------------- --- -----
    --
    -------------------------------- --- ------
    ------------------------------
    ----------
    ------------------------------------
    -------------------------------
  -
    -- --------- -- ----- ------------------- ----------------------------------
  ---------
  ----
    ------------ ------ -- -----
    ---------------
    -------------------------
    ---------
      ----------- -----
      --------------------- ---------------- --- ------
      ---------------------- ---------------- --- -----
    --
    ---------------
    ---------------------------------
  -
    --- ------------------- ------------
      ---
        -------------- ----------- -- -------------
        -----------------
        ------------------------------------
        --------- ------------ ---- --
        ---------------
      -
        --
          ------------------
          -----------------
          ------------------------------------- ------------
        --- ----------- ------
      -----
    -----
    ---- --------- ----------- --------
  ------
------

示例

HTML

----------
  ---- ------------------
    ---------- -------------
    -------- ----- ----- --- ----- ----------- ----------- ----- ----- ------- -------------- --------- --- ------ ------- -- --------- -- ------- ---- ------ ----- ---------- ------- --------- --- ------ --- ----- ----------
    ---- -------------
      -------
        ------------ ------ -- -----
        ---------------
        -------------------------
        --------------------
        ---------
          ------ -----
          ---------------- ---------------- --- -----
        --
        -------------------------------- --- ------
        ------------------------------
        ----------
        -------------------------
      --- --------- -----------
    ------
    -----
      ----
        ---------
        ---------------------- --- --
        ---------------
        ------------
        -----------------------
      -
        ---- -------
      ------
      ----
        ----------
        ---------------------- --- --
        ---------------
        ------------
        -----------------------
      -
        ----- -------
      ------
      ----
        ------------
        ---------------------- --- --
        ---------------
        ------------
        -----------------------
      -
        ------- -------
      ------
    ------
  ------
-----------

CSS

----- -
  -------- -----
  ---------- -----
  ---------------- -----------
  ------- --
  -------- --
  ----------- -----
-

---- -
  ------- - -----
  -------- --- -----
  ---------- -----
-

-------------- -
  ------ --------
  -------------- --- ----- --------
-

---------- -
  --------- ---------
-

----------------- -
  -------- ------
  --------- ---------
  -------- ---
  ---- ----
  ------ -----
  ------ --
  ------- --
  ----------- -----
  ----------- --- ------
  ------------- --- ----- ------------
  -------------- - ----- ------------
  ------------ --- ----- ------------
-

----------- ---------- -
  -------- ------
  --------- ---------
-

---------- -
  -------- ------
  -------- --- -----
  ------ -----
  ------------ -------
  -------------- ---------
  --------- -------
-

----------------- -
  -------- ------
  --------- ---------
  ---- ----
  ------ -----
  -------- ---
  ---------- ---------------- --------------
  ------ ----
  ------- ----
  ----------- --- ----- -----
  ------------- --- ----- -----
-

--------- -
  ----------- -----
  ------------ ----
  ----------- --- ----- -----
-

-------------------- -
  -------- -----
-

JavaScript

----------
  ---- ------------------
    ---------- -------------
    -------- ----- ----- --- ----- ----------- ----------- ----- ----- ------- -------------- --------- --- ------ ------- -- --------- -- ------- ---- ------ ----- ---------- ------- --------- --- ------ --- ----- ----------
    ---- -------------
      -------
        ------------ ------ -- -----
        ---------------
        -------------------------
        --------------------
        ---------
          ------ -----
          ---------------- ---------------- --- -----
        --
        -------------------------------- --- ------
        ------------------------------
        ----------
        -------------------------
      --- --------- -----------
    ------
    -----
      ----
        ---------
        ---------------------- --- --
        ---------------
        ------------
        -----------------------
      -
        ---- -------
      ------
      ----
        ----------
        ---------------------- --- --
        ---------------
        ------------
        -----------------------
      -
        ----- -------
      ------
      ----
        ------------
        ---------------------- --- --
        ---------------
        ------------
        -----------------------
      -
        ------- -------
      ------
    ------
  ------
-----------

--------
------ ------------------- ---- ---------------------------

------ ------- -
  ------- ----------------------
  ---- -- -
    ------ -
      ----------------- --
      ----- -
        - ----- ------- ------ ------ --
        - ----- -------- ------ ------- --
        - ----- ---------- ------ --------- -
      -
    -
  -
-
---------

-------
----- -
  -------- -----
  ---------- -----
  ---------------- -----------
  ------- --
  -------- --
  ----------- -----
-

---- -
  ------- - -----
  -------- --- -----
  ---------- -----
-

-------------- -
  ------ --------
  -------------- --- ----- --------
-

---------- -
  --------- ---------
-

----------------- -
  -------- ------
  --------- ---------
  -------- ---
  ---- ----
  ------ -----
  ------ --
  ------- --
  ----------- -----
  ----------- --- ------
  ------------- --- ----- ------------
  -------------- - ----- ------------
  ------------ --- ----- ------------
-

----------- ---------- -
  -------- ------
  --------- ---------
-

---------- -
  -------- ------
  -------- --- -----
  ------ -----
  ------------ -------
  -------------- ---------
  --------- -------
-

----------------- -
  -------- ------
  --------- ---------
  ---- ----
  ------ -----
  -------- ---
  ---------- ---------------- --------------
  ------ ----
  ------- ----
  ----------- --- ----- -----
  ------------- --- ----- -----
-

--------- -
  ----------- -----
  ------------ ----
  ----------- --- ----- -----
-

-------------------- -
  -------- -----
-
--------

在这个例子中，RovingTabindexMixin 为每个选项卡和选项卡内容元素自动添加了所需的 WAI-ARIA 属性和 tabindex 属性。 您可以自由定义选项卡的 HTML 结构，并定义您自己的样式规则，而无需担心选项卡切换逻辑的实现。

自由选择不同的选项卡类型以适应您的设计。我们强烈建议使用已提供的选项卡类型，并遵循 WAI-ARIA 的建议。

结论

如上所述，npm 包 vue-mixin-roving-tabindex 提供了可访问的选项卡切换体验。 这个简单易用的解决方案展示了如何使用 Vue Mixin 创建可访问的组件。

现在，您可以轻松地将此 Mixin 应用于您的下一个 Vue.js 项目中，以使您的应用程序更加易于使用和无障碍化。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005671f81e8991b448e3884

阅读全文

猜你喜欢

  • npm 包 tsing 使用教程

    前言 tsing 是一款专门为 Node.js 构建的 Web 框架，它支持 TypeScript，使用期间可以体现出其简单，高效，可扩展的特点。本文将针对 tsing 进行使用教程的介绍。

    3 年前
  • npm 包 epay-ftl-middleware 使用教程

    简介 epay-ftl-middleware 是一个基于 Node.js 的中间件，用于将 FTL 模板渲染为 HTML。它支持模板的动态替换、多语言支持和缓存等功能。

    3 年前
  • npm 包 chaptercheck 使用教程

    前言 在前端开发中，如何保证所写的文档的格式规范和准确性是十分重要的。最近我使用了一个名为 chaptercheck 的 npm 包来检查文档的格式是否符合规范，非常好用，今天我就来为大家分享一下如何...

    3 年前
  • npm 包 generator-vue-component-dev 使用教程

    前言 在前端开发中，使用 Vue.js 可以快速搭建复杂的单页应用程序。而在实际开发中，我们可能需要创建多个 Vue 组件来完成不同的功能，这时候就需要一个好的工具来快速生成组件模板代码。

    3 年前
  • npm 包 haibei-secret 使用教程

    在前端领域，有时候需要对敏感信息进行加密，并且要确保加密后的内容无法被轻易破解。这时候，我们就需要用到 haibei-secret 这个 npm 包。 本文将会详细介绍 haibei-secret 的...

    3 年前
  • npm 包 snapdragon-visit 使用教程

    什么是 snapdragon-visit snadragon-visit 是一个非常有用的 npm 包，它用于访问和修改 snapdragon AST 树。Snapdragon 是一个强大的正则表达式...

    3 年前
  • npm 包 rtcloud-core 使用教程

    介绍 rtcloud-core 是一个用于实现互动教育场景的前端框架。它提供了丰富的 API 和组件，可以方便地搭建在线教育平台、直播教育平台等互动教育场景。 安装 在开始使用 rtcloud-cor...

    3 年前
  • npm 包 apple-notes-jxa 使用教程

    如果你是 Mac 系统用户，你一定知道 Apple Notes，这是一款非常实用的笔记应用程序。但是，如果你想在代码中使用它，该怎么办呢？apple-notes-jxa 这个 npm 包可以帮你轻松地...

    3 年前
  • npm 包 detect-env 使用教程

    在前端开发中，我们经常需要根据不同的环境（如开发、测试、生产等）切换不同的配置和功能。而常见的方式是通过手动修改配置文件或使用 flag 来进行切换，但这种方式往往不够灵活且容易遗漏。

    3 年前
  • npm 包 @notadd/console 使用教程

    什么是 @notadd/console @notadd/console 是一个基于 Node.js 与 Vue.js 开发的命令行界面（CLI）工具，是 Notadd 开源项目中的一部分。

    3 年前
  • npm 包 group-data 使用教程

    在前端开发工作中，处理数据是非常常见的任务。而使用 npm 包 group-data 可以帮助我们更加高效地完成数据处理工作。本文将介绍 npm 包 group-data 的使用教程，帮助读者更好地掌...

    3 年前
  • npm 包 allex_angularwebcomponent 使用教程

    简介 在前端开发中，我们经常需要使用一些基于 Angular 框架的组件来进行开发。但是，在实际开发中，我们可能发现已有的组件无法满足我们的需求，或者我们需要为自己的应用程序定制一些特定的组件。

    3 年前
  • npm 包 breeze-bridge-angular 使用教程

    介绍 breeze-bridge-angular 是 Angular 版本的 Breeze 框架。Breeze 框架可以快速构建面向前端的 Web 应用程序，它提供了一种简单、轻便的方式来管理前端与后...

    3 年前
  • npm 包 gameblocks 使用教程

    在前端开发中，我们经常需要使用各种各样的开源库和 npm 包来提高我们的开发效率。其中，gameblocks 是一个非常实用的 npm 包，它可以帮助我们在游戏开发中快速构建游戏界面和交互功能。

    3 年前
  • npm 包 generator-aframe 使用教程

    本文介绍了如何使用 npm 包 generator-aframe 来快速生成 A-Frame 项目的基础模板，并展示了如何在此基础上进行修改和定制化。 什么是 A-Frame A-Frame 是一...

    3 年前
  • npm 包 pug-loc-debugger 使用教程

    在前端开发过程中，我们经常会使用模板引擎来渲染页面，而 Pug 是一种十分流行的模板引擎。在开发过程中，我们常常需要查看 Pug 模板文件的编译后的 HTML 代码，并且还需要能够快速定位到源文件的行...

    3 年前
  • npm 包 schedule-calendar 使用教程

    在前端开发过程中，使用日历组件可以大大提高工作效率，特别是在需要对日程进行管理和安排时。现在，有一个开源的 npm 包 schedule-calendar 可以帮助我们轻松地实现这一功能。

    3 年前
  • npm 包 sle 使用教程

    简介 SLE（Svelte Lightweight Elements）是一款基于 Svelte 的轻量级 Web 组件库，旨在提供简单、易于使用的 UI 组件。通过 npm 安装、引入来使用，支持按需...

    3 年前
  • npm 包 ts-vuetify-dom-field 使用教程

    前言 在 Vue 项目中，Vuetify 是一个非常流行的 UI 框架。但是，针对一些特殊的需求，Vuetify 的组件可能无法满足。这时候就需要手写一些组件，而在写组件的时候，DOM 操作是难以避免...

    3 年前
  • npm 包 vengeance-sass 使用教程

    引言 在前端开发中，CSS 是一个非常关键的部分。而 Sass（Syntactically Awesome StyleSheets）则是一种非常流行的 CSS 预处理器。

    3 年前

相关推荐

    暂无文章