...
- A set of cells that are vertically or horizontally stacked.
- Users are able to select one or more that one items from the list
- If the list if editable, users are able to add , detele and rename items on the list
- List cells are containers that can have text, links, images and buttons
Figure 1: Parts of a List
...
- The list component is the only choice when the set of choices needs to be editable.
Examples: A list of phone contacts, A list of tasks, a list of recordings or songs. - The list component is the only choice when the user needs to have the option to select more than one of the choices. List is the only component that supports multi-select.
Example : List of toppings the user needs to add to the list. - If the cells need to contain images and buttons.
[Note: ChoiceButton lists also support showing images and text].
Example: A list of contact phone numbers with a edit button in each row/cell - If we need to display images as a horizonally scrolling lists, the list component is again
the only choice.
Figure 2: How a developer decides which component to use when the application presents choices to the user. This flow diagram sets the functional scope for this and related components.
...
2.3.1 States of the List Cell
Figure 3: States of list cell
...
All these apply to lists in an enabled state. Lists as a whole can also be in a disabled state.
2.3.2 Actions
Figure 4: Actions related to List Cells
...
2.3.2.1 Adding to a List
Figure 5: Adding to lists
...
There are a case where the list items / cells are stacked horizontally. The only use case for this is when the list items are images or ions. List items should have a separator between them.
Figure 6: Horizontal Lists
...
This figure shows how each of these states is caused on a desktop platform.
Figure 7: List Cell states in Desktop case
...