@160over90/vue-wai-tabs 中文文档教程

Question

VueWaiTabs

Features

一个遵守 W3C Web 可访问性倡议的 Vue.js 选项卡组件。

Components

标签容器： TabsContainer 组件是选项卡组件的父容器。

TabsContainerTablist： TabsContainerTablist 组件包含一个选项卡按钮列表。

TabsContainerTablistTab： TabsContainerTablistTab 组件是选项卡按钮本身。 每个选项卡按钮都有自己的属性，这些属性基于它在 TabList 中的索引。

TabsContainerTabPanel： TabsContainerTabPanel 组件包含每个选项卡的内容。

Attributes

TabsContainerTablistTab

• :controls - this attribute must match the :id attribute in the TabsContainerTabPanel component.

示例

<template>
  <div id="app">
    <TabsContainer>
      <TabsContainerTablist>
        <TabsContainerTablistTab
          v-for="(tabItem, tabIndex) in items"
          :key="tabIndex"
          :id="`tab-panel_${tabIndex}`"
          :controls="`tab-panel_${tabIndex}`"
        >
           {{ tabItem }} tab button
        </TabsContainerTablistTab>
      </TabsContainerTablist>
      <div>
        <TabsContainerTabPanel
          v-for="(tabItem, tabIndex) in items"
          :key="tabIndex"
          :id="`tab-panel_${tabIndex}`"
          :transitionProps="{ name: 'fade' }"
        >
          {{ tabItem }} tab content
        </TabsContainerTabPanel>
      </div>
    </TabsContainer>
  </div>
</template>

<script>
export default {
  name: 'ExampleComponent',
  data() {
    return {
      items: [
        'item one',
        'item two',
        'item three',
      ],
    };
  },
};
</script>

在某些情况下，您可能希望添加一个函数来解析，对于我们的示例，tabItem：

示例

methods: {
  handleLabel(label) {
    return label.split(' ').join('-').toLowerCase();
  },
},

调用

:controls="`tab-panel_${handleLabel(tabItem)}`" //for the TabsContainerTablistTab component

:id="`tab-panel_${tabIndex}`" // for the TabsContainerTabPanel component

Project setup

yarn install

Compiles and hot-reloads for development

yarn run serve

Compiles and minifies for production

yarn run build

Lints and fixes files

yarn run lint

License

MIT