Multi Select

<sw-multi-select>

n/a

Component properties

Property name Type Default
options Array
labelProperty String label
valueProperty String value
value
label [ {}, {} ]
placeholder String
helpText String
disabled Boolean false
required Boolean false
possibleMinPosition Number 0
showSearch Boolean true
valueLimit Number 10

Methods

Method name Parameters
createdComponent No parameters
initData No parameters
loadVisibleItems No parameters
search No parameters
isSelected item
addItem
remove identifier
removeLastItem No parameters
resolveKeys keys
expandValues event
updateValue No parameters
changeDefaultItemId No parameters
onScroll event
onSearchTermChange No parameters
onKeyUpEnter No parameters
searchDelayed No parameters
openResultList event
closeResultList No parameters
destroyedComponent No parameters
addEventListeners No parameters
removeEventListeners No parameters
setFocus No parameters
setActiveResultPosition
emitActiveResultPosition No parameters
navigateUpResults No parameters
navigateDownResults No parameters
scrollToResultsTop No parameters
closeOnClickOutside event

Imports

  • ./sw-multi-select.scss
  • ./sw-multi-select.html.twig

Watcher

Mixins

  • validation

SASS variables

Variable name Value
$sw-multi-select-border-radius $border-radius-default (4px)
$sw-multi-select-color-border $color-steam-cloud ($color-gray-300)
$sw-multi-select-color-border-focus $color-shopware-blue ($color-shopware-brand-500)
$sw-multi-select-color-background $color-white (#FFF)
$sw-multi-select-color-background-single-input $color-iron ($color-gray-50)
$sw-multi-select-color-label $color-kashmir ($color-darkgray-200)
$sw-multi-select-color-background-default-item $color-cadet-blue ($color-shopware-brand-50)
$sw-multi-select-color-text-default-item $color-shopware-blue ($color-shopware-brand-500)
$sw-multi-select-color-border-default-item $color-shopware-blue ($color-shopware-brand-500)
$sw-multi-select-selection-item-color-text $color-gutenberg ($color-darkgray-200)
$sw-multi-select-font-family $font-family-default ('Source Sans Pro', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif)
$sw-multi-select-selection-item-color-background darken($color-light-gray, 5%)
$sw-multi-select-input-color-text $color-gutenberg ($color-darkgray-200)
$sw-multi-select-input-color-placeholder lighten($color-gutenberg, 25%)
$sw-multi-select-results-max-height 315px
$sw-multi-select-results-z-index $z-index-select-results (600)
$sw-multi-select-results-box-shadow 0 2px 4px 0 rgba(0, 0, 0, 0.09)
$sw-multi-select-result-color-icon darken($color-light-gray, 20%)
$sw-multi-select-color-error $color-crimson ($color-crimson-500)
$sw-multi-select-disabled-color-background $color-light-gray ($color-gray-100)
$sw-multi-select-disabled-color-text lighten($color-gutenberg, 40%)
$sw-multi-select-transition-results all ease-in-out .2s
$sw-multi-select-transition-result-icon all ease-in-out .15s

Twig blocks

  • sw_multi_select_label
  • sw_multi_select_selection_item_text
  • sw_multi_select_selection_item
  • sw_multi_select_selection_load_more_item_button
  • sw_multi_select_selection_load_more_item
  • sw_multi_select_input
  • sw_multi_select_list_item_input
  • sw_multi_select_indicators_loader
  • sw_multi_select_indicators_helptext
  • sw_multi_select_indicators
  • sw_multi_select_results_list_before
  • sw_multi_select_results_list_item_slot
  • sw_multi_select_results_list_item
  • sw_multi_select_results_list_after
  • sw_multi_select_results_list
  • sw_multi_select_results_empty_icon
  • sw_multi_select_results_empty_text
  • sw_multi_select_results_empty
  • sw_multi_select_results
  • sw_multi_select_results_transition
  • sw_multi_select_inner
  • sw_multi_select_error
  • sw_multi_select

Slots

  • labelProperty
  • sw_multi_select_list_before
  • result_items
  • sw_multi_select_list_after