Media Field

<sw-media-field>

ready
The sw-media-field component is used to bind your

Usage

<sw-media-field v-model="manufacturer.mediaId"></sw-media-field>

Component properties

Property name Type Default
mediaId String
label String

Methods

Method name Parameters
createdComponent No parameters
fetchItem id
fetchSuggestions No parameters
onTogglePicker No parameters
mediaItemChanged newMediaId
removeLink No parameters
computePickerPositionAndStyle No parameters
toggleUploadField No parameters
exposeNewId

Imports

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

Watcher

  • mediaId
  • searchTerm

SASS variables

Variable name Value
$sw-media-field-font-size-label $font-size-small (14px)
$sw-media-field-color-label $color-kashmir ($color-darkgray-200)
$sw-media-field-border-radius-input $border-radius-default (4px)
$sw-media-field-border-color-input $color-steam-cloud ($color-gray-300)
$sw-media-field-border-color-input-active $color-shopware-blue ($color-shopware-brand-500)
$sw-media-field-border-radius-picker $border-radius-default (4px)
$sw-media-field-border-color-picker $color-steam-cloud ($color-gray-300)
$sw-media-field-background-color-picker $color-white (#FFF)
$sw-media-field-background-color-list-item-hover $color-cadet-blue ($color-shopware-brand-50)
$sw-media-field-color-picker-toggle $color-shopware-blue ($color-shopware-brand-500)
$sw-media-field-color-unlink $color-crimson ($color-crimson-500)

Twig blocks

  • sw_media_field_label
  • sw_media_field_preview
  • sw_media_field_media_icon
  • sw_media_field_toggle_button
  • sw_media_field_input
  • sw_media_field_action_bar_button_toggle
  • sw_media_field_action_bar_button_unlink
  • sw_media_field_action_bar
  • sw_media_field_upload_component
  • sw_media_field_search_field
  • sw_media_field_suggestion_preview
  • sw_media_field_media_list
  • sw_media_field_media_picker
  • sw_media_field