Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: about 2 months 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-07-28T00:36:13.272Z (about 2 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 ``.