NcSelect
Props
Prop name | Description | Type | Values | Default |
---|---|---|---|---|
appendToBody | Append the dropdown element to the end of the body and size/position it dynamically.<br/> @see https://vue-select.org/api/props.html#appendtobody | boolean | - | true |
calculatePosition | When appendToBody is true, this function is responsible forpositioning the drop down list. If a function is returned from calculatePosition , it willbe called when the drop down list is removed from the DOM. This allows for any garbage collection you may need to do.<br/> @see https://vue-select.org/api/props.html#calculateposition | func | - | null |
closeOnSelect | Close the dropdown when selecting an option<br/>@see https://vue-select.org/api/props.html#closeonselect | boolean | - | true |
components | Replace default vue-select components<br/>@see https://vue-select.org/api/props.html#components | object | - | { Deselect: { render: createElement => createElement(Close, { props: { size: 20, fillColor: 'var(--vs-controls-color)', }, style: { cursor: 'pointer', }, }), } } |
disabled | Disable the component<br/>@see https://vue-select.org/api/props.html#disabled | boolean | - | false |
filterBy | Callback to determine if the provided option should match the current search text. Used to determine if the option should be displayed. Defaults to the internal vue-select function documented at the link below Enabling userSelect will automatically set this to filter by thedisplayName and subtitle properties of the user option objectunless this prop is set explicitly<br/> @see https://vue-select.org/api/props.html#filterby | func | - | null |
inputId | Input element id<br/>@see https://vue-select.org/api/props.html#inputid | string | - | null |
label | Key of the displayed label for object options Defaults to 'label' Enabling userSelect will automatically set this to 'displayName' unless this prop is set explicitly<br/> @see https://vue-select.org/api/props.html#label | string | - | null |
loading | Show the loading icon<br/>@see https://vue-select.org/api/props.html#loading | boolean | - | false |
multiple | Allow selection of multiple options<br/>@see https://vue-select.org/api/props.html#multiple | boolean | - | false |
noWrap | Disable automatic wrapping when selected options overflow the width | boolean | - | false |
options | Array of options<br/>@see https://vue-select.org/api/props.html#options | Array<string | number | { [key: string | number]: any }> | - | [] |
placeholder | Placeholder text<br/>@see https://vue-select.org/api/props.html#placeholder | string | - | '' |
placement | When appendToBody is true, this sets the placement of the dropdown | string | bottom , top | 'bottom' |
userSelect | Enable the user selector with avatars Objects must contain the data expected by the NcAvatar component | boolean | - | false |
value | Currently selected value The v-model directive may be used for two-way data binding<br/>@see https://vue-select.org/api/props.html#value | string | number | { [key: string | number]: any } | Array<any> | - | null |
Any available prop<br/>@see https://vue-select.org/api/props.html | - |
Events
Event name | Properties | Description |
---|---|---|
All events from https://vue-select.org/api/events.html |
Slots
Name | Description | Bindings |
---|---|---|
name | Any combination of slots from https://vue-select.org/api/slots.html |
Description
General purpose multiselect component.
Basic examples
loading...
No wrap example
The noWrap
prop is set to true
and the max-width
of the multiselect parent container is limited to 350px
loading...
User select examples
loading...