Select

<sw-select>

deprecated 6.1

Usage

// Single select
<sw-select id="language" label="Language" :store="languageStore"></sw-select>

// Multi select
<sw-select multi id="language" label="Language" :store="languageStore" :associationStore="languageAssociationStore">
</sw-select>

Component properties

Property name Type Default
multi Boolean false
criteria Object
placeholder String
displayName String name
value
hasPreview Boolean true
label String
id String
previewResultsLimit Number 10
resultsLimit Number 25
disabled Boolean false
store Object
highlightSearchTerm Boolean false
associationStore Object
defaultItemId String
itemValueKey String id
helpText
possibleMinPosition Number 0
showSearch Boolean true
required Boolean false
valueEmitType String values
sortField String
sortDirection String ASC
size String default

Methods

Method name Parameters
createdComponent No parameters
init No parameters
destroyedComponent No parameters
addEventListeners No parameters
removeEventListeners No parameters
calculateNextPreviewLoadStep No parameters
calculateNextLoadStep No parameters
getDistFromBottom element
loadMore No parameters
getList clearList
applyList response secondResponse clearList
loadSelected clearList
resetListing No parameters
highlight text
getListParams No parameters
getPreviewListParams No parameters
onScroll event
onPreviewLoadMore event
openResultList event
closeResultList No parameters
onSearchTermChange No parameters
doGlobalSearch No parameters
setActiveResultPosition
emitActiveResultPosition No parameters
navigateUpResults No parameters
navigateDownResults No parameters
scrollToResultsTop No parameters
setFocus event
closeOnClickOutside event
isInSelections item
addSelection
onKeyUpEnter No parameters
onDismissSelection identifier
dismissSelection identifier
dismissLastSelection No parameters
emitChanges items
updateValue No parameters
changeDefaultItemId id
onClickIndicatorDismiss No parameters

Imports

  • src/core/factory/criteria.factory
  • ./sw-select.scss
  • ./sw-select.html.twig

Watcher

  • value
  • store
  • associationStore
  • disabled

Mixins

  • validation

SASS variables

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

Twig blocks

  • sw_select_label
  • sw_select_selection_item_text
  • sw_select_selection_item
  • sw_select_selection_load_more_item_button
  • sw_select_selection_load_more_item
  • sw_select_input
  • sw_select_list_item_input
  • sw_select_multi_selections
  • sw_select_single_selection_slot_label
  • sw_select_single_selection_inner
  • sw_select_single_selection
  • sw_select__indicators_loader
  • sw_select_indicators_dismiss
  • sw_select_indicators_helptext
  • sw_select_indicators_arrow
  • sw_select_indicators
  • sw_select_results_single_input
  • sw_select_result_item_list_before
  • sw_select_result_item_slot
  • sw_select_result_item_list
  • sw_select_result_item_list_after
  • sw_select_result_item
  • sw_select_results_list
  • sw_select_results_empty_icon
  • sw_select_results_empty_text
  • sw_select_results_empty
  • sw_select_results
  • sw_select_results_transition
  • sw_select_inner
  • sw_select_error
  • sw_select

Slots

  • default
  • displayName
  • sw_select_list_before
  • result_items
  • sw_select_list_after