List Specification

Overview

igx-list should represent vertical container for contextual similar items. List is a building block of any complex UI used in almost every mobile application.

<igx-list>
    <igx-list-item isHeader="true">Header 1</igx-list-item>
    <igx-list-item>Item 1</igx-list-item>
    <igx-list-item>Item 2</igx-list-item>
    <igx-list-item>Item 3</igx-list-item>
    <igx-list-item isHeader="true">Header 2</igx-list-item>
    <igx-list-item>Item 4</igx-list-item>
    <igx-list-item>Item 5</igx-list-item>
    <igx-list-item>Item 6</igx-list-item>
</igx-list>

Objectives

Provides means for the developers to implement a simple common case, yet customizable list with minimal efforts. The list item component should be a container for text or some HTML content. A group of items into the list can be separated and labeled by header.

User Stories

Developer

As a developer I want to:

add a list, so that I can create rows of similar list-items.
have a vertically scrollable list, so that I can add as many list-items as I need.
have a list items that can be reordered, so that the users can reorder the list items as they want.

be able provide data items to the list using an ngFor directive:

  <igx-list>
    <igx-list-item *ngFor=”#apple of apples”>
      {{apple.sweetLevel}}
    </igx-list-item>
  </igx-list>

be able display group headers by adding a special header item into the list:

  <igx-list>
    <igx-list-item isHeader="true">Mildly Sweet</igx-list-item>
    <igx-list-item>Red Delicious</igx-list-item>
    <igx-list-item>Ambrosia</igx-list-item>
    <igx-list-item>Rome</igx-list-item>
  
    <igx-list-item isHeader="true">Sweet</igx-list-item>
    <igx-list-item>Golden Delicious</igx-list-item>
    <igx-list-item>Cosmic Crisp</igx-list-item>
    <igx-list-item>Pinova</igx-list-item>
  
    <igx-list-item isHeader="true">Super Sweet</igx-list-item>
    <igx-list-item>Gala</igx-list-item>
    <igx-list-item>Fuji</igx-list-item>
    <igx-list-item>Kiku</igx-list-item>
  </igx-list>

be able to provide delete buttons so users can delete items from the list.
define on-swipe actions on a list level - options that should be displayed on item swipe

End user

As a end user, I want to:

have a list of information, so that I can quickly review rows of data.
be able to vertically scroll the list, so that I can review all of the available list items.
be able to reorder the items, so that I can have them organized any way I want.
identify one, more than one or all items from a list and delete it/them.
be able to use on-swipe gestures.
quickly reorder my list items in order different from the default depending on my needs.

Acceptance criteria

The developer can add a list component to the application.
The developer can make the list vertically scrollable.
The developer can allow list items to be reordered.
The end-users can view a list.
The end-users can vertically scroll the list items
The end-users can reorder the list items.

Functionality

A list consists of a single continuous column of tessellated sub-divisions of equal width called rows that function as containers for list-items.

End User Experience

Swipe gesture - I want to slide list items through swipe (or pan) gesture.
Reordering - The list should allow reordering of its items.
Layout - Lists should scroll only vertically and the scroll should appear only when the list items overflow the screen view.