atomic-recs-list

This is for:

Developer

In this article

Properties
Methods
Shadow Parts
CSS Custom Content

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

Go to the interactive example

Properties

Property Attribute Description Type Default

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'`
`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'`

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

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'

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

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

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: ItemRenderingFunction) => Promise<void>

Returns: Promise<void>

Shadow Parts

Part Description

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.

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

Name	Description
`--atomic-recs-number-of-columns`	Number of columns for the recommendation list.

--atomic-recs-number-of-columns

Number of columns for the recommendation list.