atomic-result-list

This is for:

Developer

The atomic-result-list component is responsible for displaying query results by applying one or more result templates.

Introduction

Allows the maker to determine how the result set is shown by default by selecting 3 parameters.

User Experience and Best Practices

Image size: determine how big the visual should be, depending on how important it is for the results.

Density: how dense the results should be.

Display:

Grid

Mainly for products, makes it easier to browse products and shows more of them at a time.

List

The most common and versatile one, you rarely go wrong with that.

Table

When showing the results as a table makes the most sense, for data-heavy results.

Use Cases and Examples

Grid

Greater emphasis on the image but less on the text.

Helps if the user want to compare items visually.

Allows to display more results.

Use when you know you’ll have recent images.

List

Use when content or description is the most important things.

Helps the user compare textually, easier to scan the text.

Fewer results but reduced cognitive load since text is heavier than images.

Use when you aren’t sure of the quality of the images you’ll have.

Table

Use when you want to show your data in a table.

Reference

UI cheet sheet: list vs grid

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 desired layout to use when displaying results. Layouts affect how many results to display per row and how visually distinct they are from each other.

"grid" | "list" | "table"

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

imageSize

image-size

The expected size of the image displayed in the results.

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

'icon'

Slots

Slots let you write custom HTML at a specific place inside a web component.

Slot Description

default

The default slot where the result templates are inserted.

Methods

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

outline

The element displaying an outline or a divider around a result

result-list

The element containing every result of a result list

result-list-grid-clickable

The clickable link encompassing the result when results are displayed as a grid

result-list-grid-clickable-container

The parent of the result & the clickable link encompassing it, when results are displayed as a grid

result-table

The element of the result table containing a heading and a body

result-table-body

The element containing the rows of the result table’s body

result-table-cell

The element representing a cell of the result table’s body

result-table-heading

The element containing the row of cells in the result table’s heading

result-table-heading-cell

The element representing a cell of the result table’s heading

result-table-heading-row

The element containing cells of the result table’s heading

result-table-row

The element containing the cells of a row in the result table’s body

result-table-row-even

The element containing the cells of an even row in the result table’s body

result-table-row-odd

The element containing the cells of an odd row in the result table’s body