atomic-result-list (Deprecated)
atomic-result-list (Deprecated)
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
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
|
|
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. |
|
|
|
|
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. |
|
|
|
DEPRECATED add it to atomic-search-interface instead |
|
A list of non-default fields to include in the query results, separated by commas. |
|
|
|
DEPRECATED
use |
|
|
|
|
|
|
The expected size of the image displayed in the results. |
|
|
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, for example, 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 |
|---|---|
|
The element displaying an outline or a divider around a result |
|
The element containing every result of a result list |
|
The clickable link encompassing the result when results are displayed as a grid |
|
The parent of the result & the clickable link encompassing it, when results are displayed as a grid |
|
The element of the result table containing a heading and a body |
|
The element containing the rows of the result table’s body |
|
The element representing a cell of the result table’s body |
|
The element containing the row of cells in the result table’s heading |
|
The element representing a cell of the result table’s heading |
|
The element containing cells of the result table’s heading |
|
The element containing the cells of a row in the result table’s body |
|
The element containing the cells of an even row in the result table’s body |
|
The element containing the cells of an odd row in the result table’s body |