Vue accessible multiselect

# Usage

# Template

<template>
  <vue-accessible-multiselect
    v-model="value"
    :options="options"
    :transition="{ name: 'foo' }"
    label="foo"
    placeholder="bar"
    disabled
  ></vue-accessible-multiselect>
</template>

# Script

export default {
  // ...
  data() {
    return {
      value: [],
      options: [
        {
          value: 0,
          label: '🍇 Grape',
        },
        {
          value: { foo: 'bar' },
          label: '🍉 Watermelon',
        },
        {
          value: [1, 2, 3],
          label: '🥝 Kiwi',
        },
        {
          value: false,
          label: '🥭 Mango',
        },
        {
          value: true,
          label: '🍓 Strawberry',
        },
        {
          value: 'lemon',
          label: '🍋 Lemon',
        },
      ],
    }
  },
  // ...
}

# Styles

After that don't forget to include core styles. Note that library is sipped with default theme styles you can use.

SASS:

// recommended
@import 'vue-accessible-multiselect/src/styles/core.scss';

// optional
@import 'vue-accessible-multiselect/src/styles/themes/default.scss';

Or already compiled CSS:

/* recommended */
@import 'vue-accessible-multiselect/dist/styles/core.css';

/* optional */
@import 'vue-accessible-multiselect/dist/styles/themes/default.css';

TIP

When you import already compiled CSS you don't have ability to override SASS variables during build process, so it is preferable to use .scss file.

core.scss, contains some SASS variables you can override during build process:

$v-multiselect-menu-position-top: 100% !default;
$v-multiselect-arrow-size: 8px !default;

/themes/default.scss SASS variables are listed here .

← API →