Skip to content
This repository was archived by the owner on Nov 19, 2024. It is now read-only.

Updating the ThumbnailColumn UiComponent documentation #6081

Merged
merged 3 commits into from
Nov 27, 2019
Merged

Updating the ThumbnailColumn UiComponent documentation #6081

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
69b741f
Updating the ThumbnailColumn UiComponent documentation
eduard13 Nov 27, 2019
dae3741
Merge branch 'master' into ui-thumbnail-column-component
dobooth Nov 27, 2019
53a0be6
Small grammar change
dobooth Nov 27, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added common/images/ui_comps/thumbnail-component-result.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
51 changes: 30 additions & 21 deletions guides/v2.2/ui_comp_guide/components/ui-thumbnailcolumn.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,29 +7,38 @@ The ThumbnailColumn component implements a column containing images associated w

## Configuration options

<table>
<tr>
<th>Option</th>
<th>Description</th>
<th>Type</th>
<th>Default</th>
</tr>
<tr>
<td><code>bodyTmpl</code></td>
<td>Path to the template used for rendering a column's fields in the table's body.</td>
<td>String</td>
<td><code>ui/grid/cells/thumbnail</code></td>
</tr>
<tr>
<td><code>fieldClass</code></td>
<td>Additional CSS classes added to the column's field elements.</td>
<td><code>{[name: string]: boolean}</code></td>
<td><code>{'data-grid-thumbnail-cell': true}</code></td>
</tr>
</table>
| Option | Description | Type | Default |
| ------------ | -------------- | ---- | ------- |
| `bodyTmpl` | Path to the template used for rendering a column's fields in the table body. | `String` | `ui/grid/cells/thumbnail` |
| `fieldClass` | Additional CSS classes appended to the column's field elements. | `{[name: string]: boolean}` | `{'data-grid-thumbnail-cell': true}` |

## Examples

### Integrate the ThumbnailColumn component with the Listing component

This sample shows how the thumbnail column is added into the Product [Listing]({{ page.baseurl }}/ui_comp_guide/components/ui-listing-grid.html) component:

```xml
<columns>
<column name="thumbnail" component="Magento_Ui/js/grid/columns/thumbnail" class="Magento\Catalog\Ui\Component\Listing\Columns\Thumbnail">
<settings>
<hasPreview>1</hasPreview>
<addField>true</addField>
<label translate="true">Thumbnail</label>
<sortable>false</sortable>
</settings>
</column>
</columns>
```

#### Result

![Thumbnail UiComponent]({{ site.baseurl }}/common/images/ui_comps/thumbnail-component-result.png)

## Source files

- [Magento/Catalog/Ui/Component/Listing/Columns/Thumbnail]({{ site.mage2bloburl }}/{{ page.guide_version }}/app/code/Magento/Catalog/Ui/Component/Listing/Columns/Thumbnail.php)

Extends [`Column`]({{ page.baseurl }}/ui_comp_guide/components/ui-column.html):

- [app/code/Magento/Ui/view/base/web/js/grid/columns/thumbnail.js]({{ site.mage2bloburl }}/{{ page.guide_version }}/app/code/Magento/Ui/view/base/web/js/grid/columns/thumbnail.js)
- [app/code/Magento/Ui/view/base/web/js/grid/columns/thumbnail.js]({{ site.mage2bloburl }}/{{ page.guide_version }}/app/code/Magento/Ui/view/base/web/js/grid/columns/thumbnail.js)