# 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, opens in a new window .