Description:
A fully accessible, easy-to-style custom select component for Vue.js.
Keyboard Interactions:
Down Arrow– Moves focus and selection to the next option.Up Arrow– Moves focus and selection to the previous option.Home– Moves focus and selection to the first option.End– Moves focus and selection to the last option.
How to use it:
1. Install and import the module.
import Vue from "vue";
import { VueAccessibleSelect } from "vue-accessible-select";
2. Insert the accessible select component into your template.
<vue-accessible-select
v-model="value"
:options="options"
:disabled="disabled"
label="Select"
placeholder="Select"
>
<template v-slot:prepend>
<svg viewBox="0 0 54 54">
<path d="M27 1l8 17 19 3-14 13 4 19-17-9-17 9 3-19L0 21l19-3z"></path>
</svg>
</template>
<template v-slot:label>
<strong>😋 Just a label slot:</strong>
</template>
<template v-slot:placeholder>🎃 I am a placeholder slot</template>
<template v-slot:selected="{ value, option }">🔥 Woooow, {{ option.label }}</template>
<template v-slot:option="{ option }">{{ option.label }}.</template>
</vue-accessible-select>
<output>
<span class="tag" style="margin-right: 4px;">Value:</span> <code>{{ value }}</code>
</output>
3. Register the component and define your own options.
export default {
name: "App",
components: {
VueAccessibleSelect
},
data() {
return {
value: undefined,
options: [
{
value: 0,
label: "🍇 Grape"
},
{
value: { foo: "bar" },
label: "🍉 Watermelon"
},
{
value: { foo: "bar" },
label: "🥝 Kiwi"
},
{
value: false,
label: "🥭 Mango"
},
{
value: true,
label: "🍓 Strawberry"
},
{
value: "lemon",
label: "🍋 Lemon"
},
{
value: "melon",
label: "🍈 Melon"
},
{
value: "foo",
label: "Lorem ipsum dolor sit amet"
}
],
disabled: false
};
}
};
4. All default props.
options: {
type: Array,
required: true,
},
value: {
required: true,
},
transition: {
type: Object,
default: () => config.transition || {},
},
label: String,
placeholder: String,
disabled: Boolean
Preview:
Download Details:
Author: andrewvasilchuk
Live Demo: accessible-select-component
Download Link: https://github.com/andrewvasilchuk/vue-accessible-select/archive/master.zip
Official Website: https://github.com/andrewvasilchuk/vue-accessible-select
Install & Download:
# Yarn
$ yarn add vue-accessible-select
# NPM
$ npm install vue-accessible-select --save