1.0.3 • Published 1 year ago
vuenilla-combobox v1.0.3
vuenilla-combobox
A vue 3 combobox that inherits the styles from your style system of choice. Some assembly required.
Usage
<script setup>
import { VuenillaCombobox } from 'vuenilla-combobox'
import 'vuenilla-combobox/dist/style.css'
</script>
<template>
<VuenillaCombobox
label="Pokemon"
placeholder="🔎 Pokemon..."
is-label-hidden
:options="options"
/>
</template>
<style>
:root {
--vue-combobox-background-color: #1c1b22;
--vue-combobox-selected-background-color: #fff;
--vue-combobox-font-color: var(--vue-combobox-selected-background-color);
--vue-combobox-font-selected-color: var(--vue-combobox-background-color);
--vue-combobox-border-radius: 0.5rem;
}
</style>
Public Properties
Public properties available to customize the combobox.
property | type | required | default | example | description |
---|---|---|---|---|---|
options | Array | Yes | n/a | [{ label: 'bulbasaur', value: '1' }] | The options to be used in the combobox |
label | String | Yes | n/a | Search | The label used for both the display label and the aria label |
placeholder | String | No | 🔎 Search... | 🔎 Search... | The placeholder text for the combobox input |
isLabelHidden | Boolean | No | false | true | Whether the display label should be hidden or not |
maxDisplayRows | Number | No | 10 | 10 | How many items can be shown at once in the combobox? Regardless of how many options there are |
CSS Properties
Assign values to these CSS Properties in order to share your styles with the combobox.
property | description |
---|---|
--vue-combobox-font-color | set the color for the combobox |
--vue-combobox-background-color | set the background color for the combobox |
--vue-combobox-border-radius | set the border radius for the combobox |
--vue-combobox-font-selected-color | set the font color when a list item is selected and hovered |
--vue-combobox-selected-background-color | set the background color when a list item is selected and hovered |