Introduction

Lists are useful for displaying information and selection. This is a flexible component with pointer and keyboard navigation support.

Notable features:

• Get started with a simple array of objects
• Attributes like text, icon/image or url can be mapped to attributes in the data
• Default item components like Item & Link are available, however custom components can also be used
• It is also possible to configure a different component to be used for different items based on an attribute in the data
• Keyboard navigation support for arrow keys and enter key
• Supports multiple selection
• Provides a default renderer for items, but can be customized using snippets

Basic Example

Here's a simple example of a List component with an array of objects. Click on any item to see how selection works:

Object Array

Here's another example which uses an array of objects with more complex data.

List expects `text` attribute on each item. Optionally an `image` or `icon` attributes can be provided for each item. In this example, the value attribute has been included. Click on any item in the list to see the data of the selected item.

Field Mapping

The List component is flexible and can adapt to your data structure. Instead of altering your attributes to conform to the List's structure, you can use the `fields` property to specify which attributes should be used by the List component.

A snippet of one of the items is below:

In this we want to show `name` and the `photo` attributes as the text and image respectively. To do this we can configure fields as below:

Advanced Usage

Sometimes, we may want to use different views for different items. This can be achieved by setting both fields and using properties.

Let's say that we want to show a larger image with some descriptive text for some of the items, and for some of them, we want the image to be on the left and for some we want it on the right. This simple variation can be done using `css`, but in this case, we are going to create two custom components, Odd & Even.

We will be using the following configuration to tell the `list` to use the `type` attribute to identify the component to be used:

Now that we have mapped the `component` attribute, let's create two custom components and tell list to use these components:

If we want the `Odd` component to be used as default we can change the snippet to use `stub`: