Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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

Awesome Lists containing this project

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 ``.