salla-attachments
Renders a horizontal strip of image/video attachment thumbnails with an optional "+N" overflow indicator on the last visible item.
Renders a horizontal strip of image/video attachment thumbnails with an
optional "+N" overflow indicator on the last visible item. When clickable
is true, opens salla-attachment-view when a thumbnail is clicked.
Media can be supplied as:
attachments— full{ id, url, mimeType?/type? }objectsimages/videos— URL string arraysrating— object withimages/videosarraysproductRatings+productId— match a product rating, else fall back torating
It is used by salla-comment-item to show review photos and videos, and a theme can use it for any
media strip. Nothing is rendered when there is no valid image or video. Thumbnails are plain
div elements with a click handler (images have an empty alt), so they are not keyboard accessible.
Use it
In HTML or JSX, use the tag <salla-attachments> with the Attribute names below. In React, the wrapper takes the Property names (camelCase).
import { SallaAttachments } from '@salla.sa/twilight-components-react/attachments';Example
import { SallaAttachments } from '@salla.sa/twilight-components-react/attachments';
export function Example() {
return (
<SallaAttachments
images='["https://example.com/a.jpg", "https://example.com/b.jpg"]'
videos='["https://example.com/c.mp4"]'
maxVisible={3}
clickable />
);
}Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
attachments | attachments | Attachments to display. Accepts an array of { id, url, mimeType? } or a JSON string of the same shape. | Attachment[] | string | [] |
clickable | clickable | When true, clicking a thumbnail opens the attachment lightbox. | boolean | false |
images | images | Image URLs to display. Accepts a string array or a JSON string. | string | string[] | [] |
maxVisible | max-visible | Maximum number of thumbnails to show before displaying a "+N" overlay on the last visible item. Defaults to 4. | number | 4 |
productId | product-id | Product id used to match an entry in productRatings. | number | string | null |
productRatings | product-ratings | Product ratings list. When set with productId, the matching rating's media is preferred over rating. | MediaSource[] | string | [] |
rating | rating | Rating-like object with images / videos URL arrays. Used when images/videos are empty, and as a fallback when resolving productRatings. | string | { images?: string[]; videos?: string[]; product?: { id?: string | number; }; } | null |
videos | videos | Video URLs to display. Accepts a string array or a JSON string. | string | string[] | [] |
Related
Renders: <salla-attachment-view>.
Used inside: <salla-comment-item>, <salla-review-order-item>.