Single Select

<sw-single-select>

n/a

Component properties

Property name Type Default
options [ {}, {} ]
value
searchPlaceholder String
placeholder String
label [ {}, {} ]
helpText String
labelProperty String label
valueProperty String value
required Boolean false
disabled Boolean false
showSearch Boolean true

Methods

Method name Parameters
createdComponent No parameters
init No parameters
initPlaceholder No parameters
destroyedComponent No parameters
addEventListeners No parameters
removeEventListeners No parameters
loadSelected No parameters
resolveKey key
search No parameters
unsetValue No parameters
updateInputElement No parameters
isSelected item
setValue
openResultList No parameters
closeResultList No parameters
setFocus No parameters
closeOnClickOutside event
setActiveResultPosition
emitActiveResultPosition No parameters
navigateUpResults No parameters
navigateDownResults No parameters
onScroll event
scrollToResultsTop No parameters
onKeyUpEnter No parameters

Imports

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

Watcher

  • value
  • options

Mixins

  • validation

SASS variables

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

Twig blocks

  • sw_single_select_label
  • sw_single_select_single_selection_slot_label
  • sw_single_select_single_selection_inner
  • sw_single_select__indicators_loader
  • sw_single_select_indicators_helptext
  • sw_single_select_indicators_arrow
  • sw_single_select_indicators
  • sw_single_select_results_single_input
  • sw_single_select_result_item_list_before
  • sw_single_select_result_item_slot
  • sw_single_select_result_item_list_option
  • sw_single_select_result_item_list
  • sw_single_select_result_item_list_after
  • sw_single_select_result_item
  • sw_single_select_results_list
  • sw_single_select_results_empty_icon
  • sw_single_select_results_empty_text
  • sw_single_select_results_empty
  • sw_single_select_results
  • sw_single_select_results_transition
  • sw_single_select_inner
  • sw_single_select_error
  • sw_single_select

Slots

  • selected_option
  • labelProperty
  • sw_single_select_list_before
  • result_items
  • sw_single_select_list_after