I Have a Multiselect When Want Select Again First Dates Is Cleaned
Sponsors
About Vueform
Vueform is a comprehensive class builder for Vue.js that makes form evolution a breeze. It standardizes and handles the unabridged form edifice procedure, including:
- a consummate theming and templating organization with Tailwind back up (similar to @vueform libraries)
- 25+ form elements with multi-file uploads, appointment pickers and rich text editor
- element nesting and repeating
- 50+ validators with async, dependent and custom rules
- conditional logic on element & form level
- breaking forms into steps with form wizard
- dynamic class rendering with JSON back up
- translating course content and global i18n support.
Vueform pre-release is open for registration for the kickoff 100 developers with special discounts.
Learn more: https://vueform.com
Other libraries
- @vueform/slider - Vue iii slider component with multihandles, tooltips merging and formatting.
- @vueform/toggle - Vue 3 toggle component with labels, custom slots and styling options.
Multiselect features
- Vue ii & three back up
- No dependencies
- 100% coverage
- TypeScript support
- ESM support
- Single select options
- Multiple select options
- Tags
- Choice groups
- Async options
- Search & filtering
- Custom slots
- Events
- CSS vars back up
- Tailwind & utility form support
- Fully configurable
- CSP compilant
Sections
- Demo
- Installation
- Using with Vue 3
- Using with Vue 2
- Using with Nuxt.js
- Support
- Configuration
- Basic props
- Advanced props
- API
- Events
- Slots
- Styling
- Styling with CSS vars
- Styling with Tailwind CSS
- Examples
- Single select
- Multiselect with object options
- Multiselect with disabled options
- Multiselect with groups
- Tags with search, create and array of objects options
- Autocomplete with async options
- Tags with async options
- Select with custom options slot
- Multiselect with custom label slot
- Tags with custom tags slot
- License
Demo
Bank check out our demo.
Installation
npm install @vueform/multiselect Using with Vue 3
<template> <div> <Multiselect v-model= "value" :options= "options" /> </div> </template> <script> import Multiselect from '@vueform/multiselect' consign default { components: { Multiselect, }, data() { return { value: zilch, options: [ 'Batman' , 'Robin' , 'Joker' , ] } } } </script> <way src= "@vueform/multiselect/themes/default.css" ></style> Using with Vue 2
When using Vue 2 install @vue/composition-api via npm/yarn first:
npm i @vue/limerick-api --relieve-dev And then install the plugin for Vue:
import Vue from 'vue' import VueCompositionAPI from '@vue/limerick-api' Vue . use ( VueCompositionAPI ) After that make sure to change the imported Multiselect module to:
import Multiselect from '@vueform/multiselect/dist/multiselect.vue2.js' Using with Nuxt.js
Offset you need install @nuxtjs/limerick-api:
npm i @nuxtjs/composition-api --relieve And so you need to enable it as a module in nuxt.config.js:
{ buildModules: [ '@nuxtjs/composition-api/module' ] } After that brand certain to modify the imported module to Vue two version of Multiselect:
import Multiselect from '@vueform/multiselect/dist/multiselect.vue2' For more information on using @nuxtjs/limerick-api read their documentation.
Support
Bring together our Discord channel or open an event.
Configuration
Basic props
| Name | Type | Default | Description |
|---|---|---|---|
| mode | cord | single | Possible values: single|multiple|tags. |
| options | array|object|role | [] | List of options. Can be: - an array (eg. [1,2,three])- an object (eg. {a:one,b:2,c:3})- an assortment of objects: [ { [valueProp]: one, [label]: 'v1', disabled:true|false }, //... ] - a function returning a Promise (async function) with query input param. The hope should return options every bit an object or as an array of objects.When an array of objects is provided it must take properties that equal to :valueProp's, :trackBy's and :label's value. |
| groups | boolean | false | Whether options should exist groupped. Instance:{ groups: true, options: [ { [groupLabel]: 'Group label', [groupOptions]: {options}, disabled: true|false, } //... ] } The {options} should equal to regular options definition. |
| groupLabel | string | label | The proper noun of the property that contains the label of a grouping when options are provided in grouping format and groups is true. |
| groupOptions | string | options | The name of the belongings that contains the options of a group when options are provided in group format and groups is true. |
| groupSelect | boolean | true | Whether groups can be selected when using multiple or tags way. |
| groupHideEmpty | boolean | imitation | Whether groups that have no options by default should exist hidden. |
| required | boolean | false | Whether the HTML5 required attribute should exist used for multiselect (using an invisible fake input). |
| searchable | boolean | false | Whether the options should exist searchable. |
| valueProp | string | 'value' | If you provide an assortment of objects as options this property should exist used every bit the value of the option. |
| trackBy | string | undefined | The name of the property that should be searched when searchable is truthful and an assortment of objects are provided equally options. If left undefined the label prop volition be used instead. |
| label | cord | 'characterization' | If you provide an array of objects as options the value of this property will be displayed every bit selected option. |
| placeholder | string | cypher | The text that should exist displayed before any choice is selected. |
| multipleLabel | function | A office that returns the label to be displayed for selected options when using multiple fashion. It receives value as an argument. By default information technology renders 1 option selected and [n] options selected based on value length. | |
| disabled | boolean | false | Whether the input should be disabled for the user (API can still be used programmatically). |
| inputType | cord | text | The type aspect of the search input. |
| autocomplete | string | undefined | The autocomplete aspect of the search input. |
| max | number | -i | The maximum number of options that tin be selected when using multiple or tags way. If -one the number of options won't be limited. |
| limit | number | -ane | The maximum number of options that should be displayed. If -one the number of options won't exist express. |
| loading | boolean | false | Whether a loading spinner should be shown. |
| id | string | 'multiselect' | The id of the multiselect container DOM. |
| caret | boolean | true | Whether should display the caret symbol on the right. |
| noOptionsText | string | 'The list is empty' | The text that should be displayed when options list is empty. |
| noResultsText | string | 'No results establish' | The text that should be displayed when there are no search results. |
| openDirection | string | bottom | Whether the option list should exist displayed above or below the multiselect. Possible values: top|bottom |
| strict | boolean | truthful | Whether should regard accents/diacritics in search. |
| classes | object | An object of class names that gets merged with the default values. Default: { container: 'multiselect', containerDisabled: 'is-disabled', containerOpen: 'is-open up', containerOpenTop: 'is-open-top', containerActive: 'is-active', singleLabel: 'multiselect-single-label', singleLabelText: 'multiselect-unmarried-label-text', multipleLabel: 'multiselect-multiple-label', search: 'multiselect-search', tags: 'multiselect-tags', tag: 'multiselect-tag', tagDisabled: 'is-disabled', tagRemove: 'multiselect-tag-remove', tagRemoveIcon: 'multiselect-tag-remove-icon', tagsSearchWrapper: 'multiselect-tags-search-wrapper', tagsSearch: 'multiselect-tags-search', tagsSearchCopy: 'multiselect-tags-search-copy', placeholder: 'multiselect-placeholder', caret: 'multiselect-caret', caretOpen: 'is-open', clear: 'multiselect-clear', clearIcon: 'multiselect-clear-icon', spinner: 'multiselect-spinner', dropdown: 'multiselect-dropdown', dropdownTop: 'is-elevation', dropdownHidden: 'is-subconscious', options: 'multiselect-options', optionsTop: 'is-top', group: 'multiselect-grouping', groupLabel: 'multiselect-group-characterization', groupLabelPointable: 'is-pointable', groupLabelPointed: 'is-pointed', groupLabelSelected: 'is-selected', groupLabelDisabled: 'is-disabled', groupLabelSelectedPointed: 'is-selected is-pointed', groupLabelSelectedDisabled: 'is-selected is-disabled', groupOptions: 'multiselect-group-options', option: 'multiselect-choice', optionPointed: 'is-pointed', optionSelected: 'is-selected', optionDisabled: 'is-disabled', optionSelectedPointed: 'is-selected is-pointed', optionSelectedDisabled: 'is-selected is-disabled', noOptions: 'multiselect-no-options', noResults: 'multiselect-no-results', fakeInput: 'multiselect-fake-input', spacer: 'multiselect-spacer' } |
Avant-garde Props
| Name | Type | Default | Description |
|---|---|---|---|
| canDeselect | boolean | truthful | Whether a selected pick can be deselected when using unmarried mode. |
| canClear | boolean | true | Whether option(south) tin exist cleared. |
| clearOnSearch | boolean | imitation | Whether the option list should be cleared when a new character is typed before loading new options list, when using async options. |
| clearOnSelect | boolean | truthful | Whether the choice list should exist cleared upon selecting an option when using async options. |
| closeOnSelect | boolean | true | Whether the option list should be hidden upon selecting an option. |
| filibuster | number | -one | The delay in milliseconds that should occur between the last typed character and refreshing an async pick listing. If -1 the choice listing volition not refresh when the search query changes. If 0 it volition refresh without filibuster. |
| filterResults | boolean | true | Whether option list should be filtered past search query. This may exist prepare to false if y'all are handling filtering manually when returning async options. |
| minChars | number | 0 | The minimum number of characters that should be typed to refresh async option listing. If 0 it will refresh even when the search field becomes empty. |
| resolveOnLoad | boolean | true | Whether async options should exist loaded initially (with an empty query). This should be truthful if yous are planning to load non-object value(south) initially while using async options (to fetch matching objects for values). |
| appendNewTag | boolean | true | Deprecated two.iii.0: apply appendNewOption instead. Whether it should append new tag automatically to selection list when using tags style with createTag. If ready to fake you lot demand to take intendance of appending a new tag to the provided :options list upon @tag event. |
| createTag | boolean | false | Deprecated 2.3.0: employ createOption instead. Whether it should allow creating new tags based on search query when using tags way. |
| addTagOn | array | ['enter'] | Deprecated 2.3.0: use addOptionOn instead. The list of keys that creates a new tag while typing in the search field when having createTag enabled. Possible values: 'enter'|'space'|'tab'|';'|','. |
| appendNewOption | boolean | true | Whether it should append new selection automatically to option list when searchable and createTag are enabled. If set to faux you need to accept care of appending a new option to the provided :options list upon @choice issue. |
| createOption | boolean | false | Whether information technology should allow creating new options based on search query when searchable is enabled. |
| addOptionOn | assortment | ['enter'] | The list of keys that creates a new option while typing in the search field when having createOption enabled. Possible values: 'enter'|'infinite'|'tab'|';'|','. |
| hideSelected | boolean | truthful | Whether selected options should exist excluded from the option list when using multiple or tags mode. |
| showOptions | boolean | true | Whether option list should be displayed. Tin can exist used to create complimentary-typed tags. |
| object | boolean | false | Whether the value should be stored as an object. If false: value: ['js','jsx','ts'] Iftrue: value: [ {value:'js',label:'Javascript'}, {value:'jsx',characterization:'JSX'}, {value:'ts',characterization:'Typescript'} ] |
| attrs | object | {} | HTML attributes to add to the input field when search is enabled. |
| nativeSupport | boolean | simulated | Whether hidden input fields should be appended to achieve native data treatment. |
API
| Name | Params | Description |
|---|---|---|
| open | Opens the options list. | |
| shut | Closes the options listing. | |
| select | option | Selects an choice based on its value. |
| deselect | option | Deselects an option based on its value. |
| remove | choice | Allonym for deselect. |
| selectAll | Selects all options if mode is tags or multiple. | |
| clear | Deselects all selected options. | |
| clearSearch | Clears electric current search query. | |
| refreshOptions | callback | Refreshes async options listing. |
| setPointer | choice | Points an selection based on its value. |
To access API use ref on Multiselect component:
< Multiselect v-model="value" :options="options" ref="multiselect" /> // eg: mounted ( ) { this . $refs . multiselect . open ( ) } To programmatically open and focus the multiselect, call focus() on the element:
mounted ( ) { this . $refs . multiselect . $el . focus ( ) } Events
| Event | Attributes | Description |
|---|---|---|
| @change | value | Emitted later the value is changed. |
| @close | Emitted afterwards closing the option list. | |
| @deselect | option | Emitted after an option is deselected or a tag is removed. |
| @open | Emitted after opening the option listing. | |
| @search-modify | query | Emitted after a character is typed. |
| @select | option | Emitted after an pick or tag is selected. |
| @tag | query | Deprecated two.3.0: employ @choice instead. Emitted after enter is hit when a new tag is beingness created. |
| @option | query | Emitted after enter is hit when a new option is being created. |
| @clear | Emitted when the options are cleared. | |
| @paste | Event | Emitted when value is pasted into the search field. |
Slots
| Slot | Attributes | Description |
|---|---|---|
| placeholder | Rendered equally placeholder when the multiselect does not have value and placeholder prop is defined. | |
| afterlist | Rendered subsequently the options list. | |
| beforelist | Rendered before the options list. | |
| multiplelabel | values | Rendered when using multiple mode and options are selected. By default information technology renders the return value of multipleLabel function. |
| nooptions | Rendered when the options list is empty. Past default renders noOptionsText. | |
| noresults | Rendered when there are no search results. Past default renders noResultsText. | |
| grouplabel | group | Renders an option group characterization. |
| option | option, search | Renders an choice in options list. |
| singlelabel | value | Rendered when using single mode and an option is selected. By default it renders the :label if the selected option. |
| tag | option, handleTagRemove, disabled | Renders a tag when using tags way. When disabled the remove icon should not be displayed. The handleTagRemove prop should exist used to trigger the removal of the tag. |
| caret | Renders a small triangle on the right side of the multiselect. | |
| articulate | clear | Renders a remove icon if the multiselect has whatever value. The clear method should be used on mousedown issue. |
| spinner | Renders a loader icon when async options are being fetched. |
Note: nosotros don't use camelCase considering they are normalized back to lowercase when written in DOM.
Styling
Styling with CSS vars
The following CSS variables tin be used to customize multiselect when using default.css:
--ms-font-size : onerem ; --ms-line-meridian : 1.375; --ms-bg : #FFFFFF; --ms-bg-disabled : #F3F4F6; --ms-border-color : #D1D5DB; --ms-border-width : ipx ; --ms-radius : 4px ; --ms-py : 0.fiverem ; --ms-px : 0.875rem ; --ms-band-width : iiipx ; --ms-ring-colour : #10B98130; --ms-placeholder-colour : #9CA3AF; --ms-max-height : xrem ; --ms-spinner-color : #10B981; --ms-caret-color : #999999; --ms-clear-color : #999999; --ms-clear-color-hover : #000000; --ms-tag-font-size : 0.875rem ; --ms-tag-line-height : 1.25rem ; --ms-tag-font-weight : 600; --ms-tag-bg : #10B981; --ms-tag-bg-disabled : #9CA3AF; --ms-tag-color : #FFFFFF; --ms-tag-color-disabled : #FFFFFF; --ms-tag-radius : fourpx ; --ms-tag-py : 0.125rem ; --ms-tag-px : 0.vrem ; --ms-tag-my : 0.25rem ; --ms-tag-mx : 0.25rem ; --ms-tag-remove-radius : 4px ; --ms-tag-remove-py : 0.25rem ; --ms-tag-remove-px : 0.25rem ; --ms-tag-remove-my : 0rem ; --ms-tag-remove-mx : 0.125rem ; --ms-dropdown-bg : #FFFFFF; --ms-dropdown-edge-color : #D1D5DB; --ms-dropdown-border-width : onepx ; --ms-dropdown-radius : 4px ; --ms-group-characterization-py : 0.3rem ; --ms-group-label-px : 0.75rem ; --ms-group-label-line-tiptop : 1.375; --ms-group-characterization-bg : #E5E7EB; --ms-group-label-color : #374151; --ms-grouping-label-bg-pointed : #D1D5DB; --ms-group-label-color-pointed : #374151; --ms-group-label-bg-disabled : #F3F4F6; --ms-group-label-color-disabled : #D1D5DB; --ms-group-label-bg-selected : #059669; --ms-grouping-label-color-selected : #FFFFFF; --ms-group-characterization-bg-selected-pointed : #0c9e70; --ms-group-label-colour-selected-pointed : #FFFFFF; --ms-group-label-bg-selected-disabled : #75cfb1; --ms-group-label-color-selected-disabled : #D1FAE5; --ms-selection-font-size : 1rem ; --ms-option-line-height : 1.375; --ms-option-bg-pointed : #FFFFFF; --ms-option-colour-pointed : #1F2937; --ms-option-bg-selected : #10B981; --ms-option-color-selected : #FFFFFF; --ms-option-bg-disabled : #FFFFFF; --ms-option-colour-disabled : #D1D5DB; --ms-option-bg-selected-pointed : #26C08E; --ms-option-colour-selected-pointed : #FFFFFF; --ms-option-bg-selected-disabled : #FFFFFF; --ms-pick-color-selected-disabled : #D1FAE5; --ms-option-py : 0.vrem ; --ms-pick-px : 0.75rem ; --ms-empty-color : #4B5563; Override them globally:
: root { --ms-tag-bg : #059669; --ms-tag-color : #D1FAE5; --ms-tag-radius : 9999px ; --ms-tag-font-weight : 400; } Or on an instance level:
<Multiselect 5-model= "value" :options= "options" grade= "multiselect-green" /> <Multiselect v-model= "value" :options= "options" class= "multiselect-blue" /> .multiselect-green { --ms-tag-bg : #D1FAE5; --ms-tag-color : #059669; } .multiselect-blue { --ms-tag-bg : #DBEAFE; --ms-tag-colour : #2563EB; } Styling with Tailwind CSS
To use Multiselect with Tailwind CSS kickoff y'all need to add background images to tailwind.config.js:
// tailwind.config.js const svgToDataUri = require ( 'mini-svg-information-uri' ) module . exports = { theme: { extend: { backgroundImage: ( theme ) => ( { 'multiselect-caret': `url(" ${ svgToDataUri ( `<svg viewBox="0 0 320 512" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M31.3 192h257.3c17.8 0 26.vii 21.5 14.1 34.1L174.1 354.8c-7.8 7.viii-20.5 7.eight-28.three 0L17.2 226.1C4.vi 213.5 13.5 192 31.3 192z"></path></svg>` , ) } ")` , 'multiselect-spinner': `url(" ${ svgToDataUri ( `<svg viewBox="0 0 512 512" fill=" ${ theme ( 'colors.green.500' ) } " xmlns="http://www.w3.org/2000/svg"><path d="M456.433 371.72l-27.79-16.045c-7.192-4.152-ten.052-thirteen.136-6.487-20.636 25.82-54.328 23.566-118.602-6.768-171.03-xxx.265-52.529-84.802-86.621-144.76-91.424C262.35 71.922 256 64.953 256 56.649V24.56c0-9.31 7.916-16.609 17.204-15.96 81.795 v.717 156.412 51.902 197.611 123.408 41.301 71.385 43.99 159.096 eight.042 232.792-iv.082 8.369-14.361 11.575-22.424 6.92z"></path></svg>` , ) } ")` , 'multiselect-remove': `url(" ${ svgToDataUri ( `<svg viewBox="0 0 320 512" fill="currentColor" xmlns="http://world wide web.w3.org/2000/svg"><path d="M207.6 256l107.72-107.72c6.23-6.23 6.23-xvi.34 0-22.58l-25.03-25.03c-6.23-half dozen.23-xvi.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-six.23 half dozen.23-six.23 16.34 0 22.58L112.iv 256 4.68 363.72c-6.23 half dozen.23-6.23 sixteen.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-xvi.34 0-22.58L207.vi 256z"></path></svg>` , ) } ")` , } ) } , } } Then you demand to import themes/tailwind.scss to you primary component:
<template> <div id= "app" > <Multiselect ... /> </div> </template> <script> // ... </script> <manner lang= " scss" > @import 'path/to/node_modules/@vueform/multiselect/themes/tailwind.scss' </style>
Using :classes prop
Alternatively y'all can ascertain form names directly by passing them to the Multiselect component via classes property. When using this arroyo you don't need to import tailwind.scss. Here's a default styling for Tailwind CSS (the same included in tailwind.scss):
<Multiselect ... :classes= "{ container: 'relative mx-auto westward-total flex items-center justify-end box-border cursor-pointer border border-greyness-300 rounded bg-white text-base of operations leading-snug outline-none' , containerDisabled: 'cursor-default bg-gray-100' , containerOpen: 'rounded-b-none' , containerOpenTop: 'rounded-t-none' , containerActive: 'ring ring-light-green-500 ring-opacity-xxx' , singleLabel: 'flex items-middle h-full max-west-full absolute left-0 top-0 arrow-events-none bg-transparent leading-snug pl-3.5 pr-sixteen box-border' , singleLabelText: 'overflow-ellipsis overflow-hidden cake whitespace-nowrap max-w-full' , multipleLabel: 'flex items-middle h-total absolute left-0 superlative-0 arrow-events-none bg-transparent leading-snug pl-three.v' , search: 'w-total absolute inset-0 outline-none focus:band-0 appearance-none box-edge edge-0 text-base font-sans bg-white rounded pl-3.5' , tags: 'flex-grow flex-shrink flex flex-wrap items-eye mt-1 pl-two' , tag: 'bg-dark-green-500 text-white text-sm font-semibold py-0.five pl-two rounded mr-one mb-1 flex items-center whitespace-nowrap' , tagDisabled: 'pr-2 opacity-50' , tagRemove: 'flex items-center justify-center p-1 mx-0.5 rounded-sm hover:bg-black hover:bg-opacity-ten group' , tagRemoveIcon: 'bg-multiselect-remove bg-center bg-no-echo opacity-thirty inline-block w-3 h-3 group-hover:opacity-60' , tagsSearchWrapper: 'inline-cake relative mx-1 mb-ane flex-grow flex-shrink h-full' , tagsSearch: 'absolute inset-0 border-0 outline-none focus:ring-0 appearance-none p-0 text-base of operations font-sans box-border w-full' , tagsSearchCopy: 'invisible whitespace-pre-wrap inline-block h-px' , placeholder: 'flex items-center h-full accented left-0 top-0 arrow-events-none bg-transparent leading-snug pl-3.v text-gray-400' , caret: 'bg-multiselect-caret bg-center bg-no-repeat w-2.5 h-4 py-px box-content mr-3.5 relative z-x opacity-40 flex-shrink-0 flex-grow-0 transition-transform transform pointer-events-none' , caretOpen: 'rotate-180 pointer-events-car' , articulate: 'pr-3.5 relative z-10 opacity-xl transition duration-300 flex-shrink-0 flex-grow-0 flex hover:opacity-80' , clearIcon: 'bg-multiselect-remove bg-center bg-no-echo west-2.5 h-iv py-px box-content inline-block' , spinner: 'bg-multiselect-spinner bg-eye bg-no-repeat w-4 h-4 z-10 mr-iii.five animate-spin flex-shrink-0 flex-grow-0' , dropdown: 'max-h-60 accented -left-px -right-px bottom-0 transform translate-y-total border border-greyness-300 -mt-px overflow-y-scroll z-50 bg-white flex flex-col rounded-b' , dropdownTop: '-translate-y-total top-px bottom-automobile flex-col-opposite rounded-b-none rounded-t' , dropdownHidden: 'hidden' , options: 'flex flex-col p-0 m-0 listing-none' , optionsTop: 'flex-col-reverse' , grouping: 'p-0 m-0' , groupLabel: 'flex text-sm box-border items-center justify-outset text-left py-1 px-3 font-semibold bg-grey-200 cursor-default leading-normal' , groupLabelPointable: 'cursor-pointer' , groupLabelPointed: 'bg-gray-300 text-gray-700' , groupLabelSelected: 'bg-greenish-600 text-white' , groupLabelDisabled: 'bg-grey-100 text-gray-300 cursor-non-allowed' , groupLabelSelectedPointed: 'bg-green-600 text-white opacity-90' , groupLabelSelectedDisabled: 'text-light-green-100 bg-green-600 bg-opacity-l cursor-not-allowed' , groupOptions: 'p-0 grand-0' , pick: 'flex items-center justify-start box-border text-left cursor-arrow text-base leading-snug py-2 px-3' , optionPointed: 'text-gray-800 bg-gray-100' , optionSelected: 'text-white bg-green-500' , optionDisabled: 'text-gray-300 cursor-not-allowed' , optionSelectedPointed: 'text-white bg-green-500 opacity-90' , optionSelectedDisabled: 'text-light-green-100 bg-green-500 bg-opacity-50 cursor-not-immune' , noOptions: 'py-2 px-3 text-gray-600 bg-white text-left' , noResults: 'py-two px-3 text-greyness-600 bg-white text-left' , fakeInput: 'bg-transparent absolute left-0 correct-0 -lesser-px due west-full h-px border-0 p-0 appearance-none outline-none text-transparent' , spacer: 'h-9 py-px box-content' , }" />
Certain classes has different states which are merged to the base class when the state is active. For example dropdown volition be merged with dropdownTop when open-direction: 'top' resulting in the following classes: absolute -left-px -right-px bottom-0 transform translate-y-full edge border-gray-300 -mt-px overflow-y-gyre z-50 bg-white flex flex-col rounded-b -translate-y-full summit-px bottom-auto flex-col-reverse rounded-b-none rounded-t
The aforementioned is true for container, tag, options, groupLabel and selection classes.
In case you need to override the same blazon of utility y'all might use @neojp/tailwind-important-variant for eg. bg-green-500!.
Examples
- Single select
- Multiselect with object options
- Multiselect with disabled options
- Multiselect with groups
- Tags with search, create and array of objects options
- Autocomplete with async options
- Tags with async options
- Select with custom options slot
- Multiselect with custom label slot
- Tags with custom tags slot
Single select
<Multiselect v-model= "value" :options= "[ 'Batman' , 'Robin' , 'Joker' ]" /> JSFiddle - Instance #one
Multiselect with object options
<Multiselect 5-model= "value" manner= "multiple" :close-on-select= " false " :options= "{ batman: 'Batman' , robin: 'Robin' , joker: 'Joker' }" /> JSFiddle - Example #ii
Multiselect with disabled options
<Multiselect 5-model= "value" mode= "multiple" :shut-on-select= " false " :options= "[ { value: 'batman' , characterization: 'Batman' }, { value: 'robin' , label: 'Robin' , disabled: true }, { value: 'joker' , label: 'Joker' }, ]" /> JSFiddle - Instance #iii
Multiselect with groups
<Multiselect 5-model= "value" mode= "multiple" :close-on-select= " faux " :groups= " true " :options= "[ { label: 'DC' , options: [ 'Batman' , 'Robin' , 'Joker' ], }, { label: 'Marvel' , options: [ 'Spiderman' , 'Fe Homo' , 'Helm America' ], }, ]" /> JSFiddle - Case #4
Tags with search, create and array of objects options
<Multiselect v-model= "value" mode= "tags" :close-on-select= " false " :searchable= " truthful " :create-option= " true " :options= "[ { value: 'batman' , label: 'Batman' }, { value: 'robin' , label: 'Robin' }, { value: 'joker' , label: 'Joker' }, ]" />
JSFiddle - Example #five
Autocomplete with async options
<Multiselect v-model= "value" placeholder= "Choose a programming language" :filter-results= " false " :min-chars= " 1 " :resolve-on-load= " fake " :delay= " 0 " :searchable= " truthful " :options= " async function(query) { return await fetchLanguages(query) // check JS block in JSFiddle for implementation }" /> JSFiddle - Example #six
Tags with async options
<Multiselect five-model= "value" style= "tags" placeholder= "Cull your stack" :close-on-select= " false " :filter-results= " faux " :min-chars= " 1 " :resolve-on-load= " false " :delay= " 0 " :searchable= " true " :options= " async function(query) { return await fetchLanguages(query) // cheque JS block in JSFiddle for implementation }" />
JSFiddle - Example #seven
Select with custom options slot
<Multiselect v-model= "value" placeholder= "Select your character" characterization= "proper name" :options= "[ { value: 'captainamerica' , name: 'Helm America' , icon: 'https://cdn2.iconfinder.com/data/icons/avengers-filled/48/03_-_Captain_America_-_infinity_war_-_end_game_-_marvel_-_avengers_-_super_hero-512.png' }, { value: 'spiderman' , name: 'Spiderman' , icon: 'https://cdn2.iconfinder.com/data/icons/avengers-filled/48/12_-_Spiderman_-_infinity_war_-_end_game_-_marvel_-_avengers_-_super_hero-512.png' }, { value: 'ironman' , name: 'Atomic number 26 Man' , icon: 'https://cdn2.iconfinder.com/information/icons/avengers-filled/48/02_-_IRONMAN_-_infinity_war_-_end_game_-_marvel_-_avengers_-_super_hero-512.png' }, ]" > <template v-slot:singlelabel= "{ value }" > <div course= "multiselect-single-label" > <img grade= "character-label-icon" :src= " value.icon " > {{ value.name }} </div> </template> <template v-slot:option= "{ choice }" > <img class= "graphic symbol-option-icon" :src= " option.icon " > {{ choice.name }} </template> </Multiselect> JSFiddle - Example #8
Multiselect with custom characterization slot
<Multiselect v-model= "value" mode= "multiple" placeholder= "Select your characters" :close-on-select= " false " :options= "{ batman: 'Batman' , robin: 'Robin' , joker: 'Joker' }" > <template 5-slot:multiplelabel= "{ values }" > <div class= "multiselect-multiple-characterization" > {{ values.length }} characters selected </div> </template> </Multiselect> JSFiddle - Example #9
Tags with custom tags slot
<template> <Multiselect v-model= "value" style= "tags" placeholder= "Select employees" track-by= "name" label= "proper name" :close-on-select= " false " :search= " true " :options= "[ { value: 'judy' , name: 'Judy' , image: 'https://randomuser.me/api/portraits/med/women/i.jpg' }, { value: 'jane' , proper name: 'Jane' , image: 'https://randomuser.me/api/portraits/med/women/ii.jpg' }, { value: 'john' , name: 'John' , image: 'https://randomuser.me/api/portraits/med/men/1.jpg' }, { value: 'joe' , name: 'Joe' , prototype: 'https://randomuser.me/api/portraits/med/men/2.jpg' } ]" > <template v-slot:tag= "{ option, handleTagRemove, disabled }" > <div class= "multiselect-tag is-user" > <img :src= " option.paradigm " > {{ option.name }} <span v-if= " !disabled" class= "multiselect-tag-remove" @mousedown.prevent= " handleTagRemove(option, $event)" > <span class= "multiselect-tag-remove-icon" ></span> </span> </div> </template> </Multiselect> </template> <mode> .multiselect-tag.is-user { padding : 5px viiipx ; border-radius : 22px ; background : #35495e; margin : threepx threepx eightpx ; } .multiselect-tag.is-user img { width : eighteenpx ; edge-radius : l% ; height : 18px ; margin-right : 8px ; edge : iipx solid #ffffffbf; } .multiselect-tag.is-user i :before { color : #ffffff; border-radius : 50% ;; } .user-image { margin : 0 6px 0 0; border-radius : 50% ; height : 22px ; } </style> JSFiddle - Example #10
License
MIT
Source: https://github.com/vueform/multiselect
0 Response to "I Have a Multiselect When Want Select Again First Dates Is Cleaned"
Post a Comment