Tag Multi Select

<sw-tag-multi-select>

Component properties

Property name Type Default
entity Object
disabled Boolean false
label Boolean true
size String default
showLabel Boolean true

Methods

Method name Parameters
createdComponent No parameters
destroyedComponent No parameters
addEventListeners No parameters
removeEventListeners No parameters
createRepositories No parameters
loadTagList clearList
loadSelectedTags isInitial
addSelectedTag tag
checkTagExists No parameters
getDistFromBottom element
setActiveOption
deleteSelectedTag tag
isSelected No parameters
loadMoreSelected No parameters
createNewTag No parameters
highlight text
scrollToTop No parameters
onSearchTermChange No parameters
onFocus No parameters
openList No parameters
onOptionClick event
onScroll event
onBlurField event
onKeyEnter No parameters
onNavigateDown No parameters
onNavigateUp No parameters
onDelete No parameters
calculateSelectedNextStep No parameters
emitActiveOption No parameters
emitAddSelection tag
emitRemoveSelection tag
emitChange No parameters

Imports

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

Inject

  • repositoryFactory
  • context

SASS variables

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

Twig blocks

  • sw_tag_multi_select_label
  • sw_tag_multi_select_selected_list_items_label_content
  • sw_tag_multi_select_selected_list_items_remove
  • sw_tag_multi_select_selected_list_items_label
  • sw_tag_multi_select_selected_list_items
  • sw_tag_multi_select_selected_list_load_more_button
  • sw_tag_multi_select_selected_list_load_more
  • sw_tag_multi_select_selected_search_input
  • sw_tag_multi_select_selected_search
  • sw_tag_multi_select_selected_list
  • sw_tag_multi_select_loading_indicator
  • sw_tag_multi_select_option_list_create_option
  • sw_tag_multi_select_option_list_options_label
  • sw_tag_multi_select_option_list_options
  • sw_tag_multi_select_option_list_options_template
  • sw_tag_multi_select_option_list
  • sw_tag_multi_select_option_list_empty_result_item_text
  • sw_tag_multi_select_option_list_empty_result_item
  • sw_tag_multi_select_option_list_wrapper_inner
  • sw_tag_multi_select_option_list_wrapper
  • sw_tag_multi_select_container
  • sw_tag_multi_select

Slots

  • labelProperty
  • result_items