https://github.com/jakedohm/vue-accessible-tabs

An accessible, unstyled <Tabs> implementation for Vue 2
https://github.com/jakedohm/vue-accessible-tabs

tabs vue vuejs

Last synced: 9 days ago
JSON representation

An accessible, unstyled <Tabs> implementation for Vue 2

• Host: GitHub
• URL: https://github.com/jakedohm/vue-accessible-tabs
• Owner: jakedohm
• License: mit
• Created: 2020-05-18T19:49:27.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2020-05-20T14:48:01.000Z (over 4 years ago)
• Last Synced: 2024-08-02T00:22:19.870Z (4 months ago)
• Topics: tabs, vue, vuejs
• Language: JavaScript
• Homepage:
• Size: 13.7 KB
• Stars: 25
• Watchers: 2
• Forks: 1
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-a11y-vue - vue-accessible-tabs - An accessible, unstyled <Tabs> implementation for Vue 2 (Components and plugins / Courses)
• awesome-access - vue-accessible-tabs - An accessible, unstyled <Tabs> implementation for Vue 2 (Components and plugins / Courses)

README

        
# vue-accessible-tabs

## Usage

```vue

  

    Give

    

      You

    

    Up

  

  

    

      
Panel #1

    

    

      
Panel #2

    

    

      
Panel #3

    

  


```

## Installation

```bash

# yarn

yarn add vue-accessible-tabs

# npm

npm install vue-accessible-tabs

```

## Using the Components

### Importing

```js

import { Tabs, Tab, TabList, TabPanels, TabPanel } from 'vue-accessible-tabs'

```

### Global Registration

```js

import { Tabs, Tab, TabList, TabPanels, TabPanel } from 'vue-accessible-tabs'

// Globally register

Vue.component('Tabs', Tabs)

Vue.component('Tab', Tab)

Vue.component('TabList', TabList)

Vue.component('TabPanels', TabPanels)

Vue.component('TabPanel', TabPanel)

```

## Styling

This library provides no default styling, it's totally BYOS. The good news is: each component only renders one element, so you can style it by simply adding classes. This means it'll play nice with pretty much any approach to styling.

## Roadmap

- Document  APIs

- Add examples

  - How to style

  - Animating `` in/out

- Document keyboard behavior

## FAQ

**Q**: How do I use this on a site where I'm not bundling my code?


**A**: You can't, yet. I'll get around to bundling, sometime, maybe, tho I might not because ESM rules and I hate bundling...

**Q**: Can I pass HTML into the slots of these components?


**A**: Yes, anything is fair game **except** you can _only_ pass `` elements to ``, and you can only pass `` elements to ``.