@160over90/vue-wai-tabs 中文文档教程
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
VueWaiTabs
Features
A Vue.js tab component that adhere's to the W3C Web Accessibility Initiative.
Components
TabsContainer: The TabsContainer component is the parent container for tab component.
TabsContainerTablist: The TabsContainerTablist component contains a list of tab buttons.
TabsContainerTablistTab: The TabsContainerTablistTab component is the tab button itself. Each tab button its own attributes based on its index in the TabList.
TabsContainerTabPanel: The TabsContainerTabPanel component houses each tabs content.
Attributes
TabsContainerTablistTab
- :controls - this attribute must match the :id attribute in the TabsContainerTabPanel component.
Example
<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>
In some cases you may want to add a function that parses, for our example, the tabItem:
Example
methods: {
handleLabel(label) {
return label.split(' ').join('-').toLowerCase();
},
},
Invocation
: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
