@a11y-kit/vue-tabs 中文文档教程

Question

@a11y-kit/vue-tabs

一套无样式组件，可以是用于构建可访问的选项卡界面。 实现尽可能接近 WCAG 示例尽可能在 Vue 环境中友好地使用它。

????完整文档

Installation

yarn add @a11y-kit/vue-tabs

或

npm i @a11y-kit/vue-tabs

Usage

<template>
  <TabWrapper v-model="activeTab">

    <TabList label="Animals">
      <TabActivator tab="dogs">Dogs</TabActivator>
      <TabActivator tab="cats">Cats</TabActivator>
    </TabList>

    <TabPanel tab="dogs">
      Dogs are pretty cool.  Here's some info about them.
    </TabPanel>
    <TabPanel tab="cats">
      Cats are pretty neat too.  Here's some stuff about them!
    </TabPanel>
  </TabWrapper>
</template>

<script>
import { TabActivator, TabList, TabPanel, TabWrapper } from '@a11y-kit/vue-tabs'

export default {
  components: { TabActivator, TabList, TabPanel, TabWrapper },

  data() {
    return {
      activeTab: ''
    }
  }
}
</script>

????完整文档 | 更多示例