# vue-alphanav

> Alphabetical Navigation bar displayed using flexbox.

Latest version **1.2.0** (published 2019-11-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-alphanav
pnpm add vue-alphanav
yarn add vue-alphanav
bun add vue-alphanav
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.0 |
| Published | 2019-11-20 |
| First published | 2019-11-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 326.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | x. Villamuera |
| Maintainers | xavsio4 |
| Keywords | vuejs, navigation, alphabetical |

## Links

- npm: https://www.npmjs.com/package/vue-alphanav
- Repository: https://github.com/xavsio4/vue-alphanav
- Homepage: https://github.com/xavsio4/vue-alphanav#readme
- Issues: https://github.com/xavsio4/vue-alphanav/issues
- npm.io page: https://npm.io/package/vue-alphanav

## Alternatives

- [express-promise-router](https://npm.io/package/express-promise-router.md) — 736.1K weekly downloads
- [next-usequerystate](https://npm.io/package/next-usequerystate.md) — 29.8K weekly downloads
- [@bitkyc08/opencodex](https://npm.io/package/@bitkyc08/opencodex.md) — 4.6K weekly downloads
- [lynkr](https://npm.io/package/lynkr.md) — 575 weekly downloads
- [baremetal.js](https://npm.io/package/baremetal.js.md) — 42 weekly downloads

## Recent versions

- 1.2.0 (latest) — 2019-11-20
- 1.1.14 — 2019-11-20
- 1.1.13 — 2019-11-20
- 1.1.12 — 2019-11-20
- 1.1.11 — 2019-11-20
- 1.1.10 — 2019-11-20
- 1.1.9 — 2019-11-20
- 1.1.8 — 2019-11-20
- 1.1.7 — 2019-11-20
- 1.1.6 — 2019-11-20
- 1.1.5 — 2019-11-20
- 1.1.4 — 2019-11-19
- 1.1.3 — 2019-11-19
- 1.1.2 — 2019-11-19
- 1.1.1 — 2019-11-19
- … 5 more at https://npm.io/package/vue-alphanav/versions

## README

# vue-alphanav
Alphabetical Navigation Bar using flexbox made with Vue.
![vue-alphanav Gif](demo/demo.gif)

This bar can be displayed horizontaly or verticaly. Bind any action to the click event (@selected). It will adapt to the container you'll put it in. 

It seems to me that this is a better navigation, then a default table/pagination, for an address directory, because you will never know on which page is the person you are looking for.

in order to install it in your project
```
npm install vue-alphanav (or npm i vue-alphanav)

```

then import the component where you need it

```
<template>
<div>
  <alphanav 
  :showClear=true 
  clearLinkText="reset"
  direction="horizontal" 
  @clear="clear" 
  @selected="selectedAlpha"></alphanav>

  <alphanav :alphaList="['A-C','D-E','F-H','I-K','L-N','O-Q','R-T','U-W','X-Z']" />

  <>
</div>
</template>

<script>
import Alphanav from "vue-alphanav"

export default {
components: {
  alphanav
},
methods: {
  YourMethod(selectedAlpha) {
    console.log(selectedAlpha.value) //the letter you've clicked on
  }
  clear() {
    //your actions when clear
  }
}
}

</script>
<style scoped>
</style>

```

## Available props

| Prop                  | Type                        | Required | Default   | Description |
|-----------------------|-----------------------------|----------|-----------|-------------|
| direction                | String |     NO     | horizontal      | wether the nav list is displayed vertically or horizontally. Values are: horizontal/vertical|
| showClear                | Bolean |     NO     | false      | Show a clear/reset link at the end of the navigation. |
| clearLinkText                | String |     NO     | 'clr'      | Text of the reset/clear link |
| alphaList                | Array |     NO     | 'A','B','C',....'Z'      | list of alphanav links. It can be anything to be displayed as long as it is in an Array |

Events
------

| Name              | Params                       | Info                                                  |
| ----------------- | ---------------------------- | ----------------------------------------------------- |
| **@selected**         | *item*: (selectedAlpha in our example) item.value         | Triggered on any letter clicked              |
| **@clear**         | none        | Clears the selection in the alphanav              |

This is the demo in the awesome Codesandbox\
[![Edit Alphanav Demo](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/alphanav-demo-uvgk2?fontsize=14)


## Version History
- 1.2.0 Added alphaList as a property to change the nav links
- 1.1.0 Added clear/reset feature
- 1.0.9 First Working Version. Demo on Codesandbox

---
_Source: https://npm.io/package/vue-alphanav · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._