Media Base Item

<sw-media-base-item>

ready
The sw-media-base-item component is the base for items in the media manager.

Usage

<sw-media-base-item
    isList="true"
    :isLoading="item.isLoading">
</sw-media-base-item>

Component properties

Property name Type Default
item Object
isList Boolean false
showSelectionIndicator Boolean false
showContextMenuButton Boolean true
selected Boolean false
editable Boolean true
allowMultiSelect Boolean true
truncateRight Boolean false

Methods

Method name Parameters
handleItemClick originalDomEvent
isSelectionIndicatorClicked path
onClickedItem originalDomEvent
selectItem originalDomEvent
removeFromSelection originalDomEvent
startInlineEdit No parameters
endInlineEdit No parameters

Imports

  • ./sw-media-base-item.html.twig
  • ./sw-media-base-item.scss

SASS variables

Variable name Value
$sw-media-base-item-color $color-kashmir ($color-darkgray-200)
$sw-media-base-item-border-radius $border-radius-default (4px)
$sw-media-base-item-small-font-size $font-size-small (14px)
$sw-media-base-item-color-border $color-steam-cloud ($color-gray-300)
$sw-media-base-item-color-text-inline-input $color-gutenberg ($color-darkgray-200)
$sw-media-base-item-color-context-button $color-white (#FFF)
$sw-media-base-item-color-loading-indicator $color-gutenberg ($color-darkgray-200)
$sw-media-base-item-color-hover $color-cadet-blue ($color-shopware-brand-50)
$sw-media-base-item-color-metadata lighten($color-gutenberg, 30)
$sw-media-base-item-pseudo-padding 33px
$sw-media-base-item-color-input-background $color-white (#FFF)
$sw-media-base-item-color-input-border $color-steam-cloud ($color-gray-300)
$sw-media-base-item-border-radius-input $border-radius-default (4px)
$sw-media-base-item-color-selected $color-shopware-blue ($color-shopware-brand-500)
$sw-media-base-item-color-checkmark $color-white (#FFF)
$sw-media-base-item-color-input $color-black (#000)
$sw-media-base-item-preview-background $color-white (#FFF)

Twig blocks

  • sw_media_base_item_selection_indicator_icon
  • sw_media_base_item_selected_indicator
  • sw_media_base_item_slot_media_preview
  • sw_media_base_item_preview
  • sw_media_base_item_name_container
  • sw_media_base_item_slot_media_item_metadata
  • sw_media_base_item_metadata
  • sw_media_base_item_metadata_container
  • sw_media_base_item_slot_media_item_context_menu
  • sw_media_base_item_context_items
  • sw_media_base_item_context_menu
  • sw_media_base_item_list_selected_indicator
  • sw_media_base_item_loading_indicator
  • sw_media_base_item

Slots

  • preview
  • name
  • metadata
  • context-menu
  • modal-windows