atomic-recs-list

This is for:

Developer

The atomic-recs-list component displays recommendations by applying one or more result templates.

Properties

Property Attribute Description Type Default

density

density

The spacing of various elements in the result list, including the gap between results, the gap between parts of a result, and the font sizes of different parts in a result.

"comfortable" | "compact" | "normal"

'normal'

display

display

The layout to apply when displaying results themselves. This does not affect the display of the surrounding list itself. To modify the number of recommendations per column, modify the --atomic-recs-number-of-columns CSS variable.

"grid" | "list"

'list'

gridCellLinkTarget

grid-cell-link-target

The target location to open the result link (see target). This property is only leveraged when display is grid.

"_blank" | "_parent" | "_self" | "_top"

'_self'

headingLevel

heading-level

The heading level to use for the heading label, from 1 to 6.

number

0

imageSize

image-size

The expected size of the image displayed in the results.

"icon" | "large" | "none" | "small"

'small'

label

label

The non-localized label for the list of recommendations.

string | undefined

numberOfRecommendations

number-of-recommendations

The total number of recommendations to display. This does not modify the number of recommendations per column. To do so, modify the --atomic-recs-number-of-columns CSS variable.

number

10

numberOfRecommendationsPerPage

number-of-recommendations-per-page

The number of recommendations to display, per page. Setting a value greater than and lower than the numberOfRecommendations value activates the carousel. This does not affect the display of the list itself, only the number of recommendation pages.

number | undefined

recommendation

recommendation

The Recommendation identifier used by the Coveo platform to retrieve recommended documents. Make sure to set a different value for each atomic-recs-list in your page.

string

'Recommendation'

Methods

nextPage

Moves to the next page, when the carousel is activated.

Signature: nextPage() => Promise<void>

Returns: Promise<void>

previousPage

Moves to the previous page, when the carousel is activated.

Signature: previousPage() => Promise<void>

Returns: Promise<void>

setRenderFunction

Sets a rendering function to bypass the standard HTML template mechanism for rendering results. You can use this function while working with web frameworks that don’t use plain HTML syntax, e.g., React, Angular or Vue.

Do not use this method if you integrate Atomic in a plain HTML deployment.

Signature: setRenderFunction(resultRenderingFunction: ResultRenderingFunction) => Promise<void>

Returns: Promise<void>

Shadow Parts

Part Description

active-indicator

The active indicator.

indicator

A single indicator.

indicators

The list of indicators.

label

The label of the result list.

next-button

The next button.

previous-button

The previous button.

result-list

The element containing the list of results.

result-list-grid-clickable

The clickable link encompassing the result.

result-list-grid-clickable-container

The parent of the result & the clickable link encompassing it.

CSS Custom Content

Name Description

--atomic-recs-number-of-columns

Number of columns for the recommendation list.