Layout & Theming

Customize the look & feel

Layout

The component allows to fairly easy customize its layout:

import { vSelect } from '@desislavsd/vue-select'
import MyLayout from './components/myVueSelectLayout.vue'

vSelect.components; // { Option, Selected, Layout }

// custom vSelect component that will hide the build in ajax indicator
let MyVSelect = {
    mixins: [vSelect],
    components: {
        Layout: MyLayout
    }
}

Here is an example of a valid Layout component that contains all the recommended slots and the default CSS classes.

<template>
    <div>
        <div class="v-select-bar">
            
            <slot name="selected" /> 

            <div class="v-select-inp-group">
                <slot name="input" />
                <slot name="actions" />
            </div>

        </div>

        <div class="v-select-list" ref="list">
            <slot name="options" />
        </div>

    </div>
</template>

<script>
export default {
    inject: ['select']
}
</script>

<style>
</style>

You can add classes and elements as you like. You can even add more scoped slots. The scope of each scoped slot is automatically populated with { state, select }, where state contains various state related flags & properties and select is the component instance itself.

Theming

The component utilizes CSS variables to make it easy for you to apply quick changes in component's size and colors. Check the root element in the devtools for the compleet list.

.v-select {
    --c-base: #fff; /* background */
    --c-theme: #f0f0f0; /* tags background; options hover */
    --c-border: #ccc; /* border color of root element and tags */
    --radius: 0.2em; /* border radius of root element and tags */
    --padd: 3px; /* tags spacing */
    --height: 3em; /* minimum height; can grow larger when `:multiple=true` */
}

Scaling

Since all elements are sized using em units you can easily scale the component by changing the font size of the root element:

.v-select {
    font-size: 10px;
}