Platform: List List Item Component Technical Design

List/List Item

Summary

A List is a group of related items. The List can be for display only or can allow selection of items or it can include item actions.

Example

<fdp-list [isSelectable]="true" (itemSelectionChange)="onItemSelectionChange($event)">
    <fdp-list-group-header>Group Header</fdp-list-group-header>
    <fdp-list-item [value]="item1">
        <fdp-list-item-title>Item 1</fdp-list-item-title>
    </fdp-list-item>
    <fdp-list-item [value]="item2">
        <fdp-list-item-title>Item 2</fdp-list-item-title>
    </fdp-list-item>
    <fdp-list-item [value]="item3">
        <fdp-list-item-title>Item 3</fdp-list-item-title>
    </fdp-list-item>
    <fdp-list-footer>Footer</fdp-list-footer>
</fdp-list>

<!-- List items with secondary information -->
<fdp-list [isBorderless]="true">
    <fdp-list-group-header>Group Header</fdp-list-group-header>
    <fdp-list-item>
        <fdp-list-item-title>Item 1</fdp-list-item-title>
        <fdp-list-item-info>18</fdp-list-item-info>
    </fdp-list-item>
    <fdp-list-item>
        <fdp-list-item-title>Item 2</fdp-list-item-title>
        <fdp-list-item-info>21</fdp-list-item-info>
    </fdp-list-item>
    <fdp-list-item>
        <fdp-list-item-title>Item 3</fdp-list-item-title>
        <fdp-list-item-info>7</fdp-list-item-info>
    </fdp-list-item>
    <fdp-list-footer>Footer</fdp-list-footer>
</fdp-list>

<!-- List items with actions -->
<fdp-list [isBorderless]="true">
    <fdp-list-group-header>Group Header</fdp-list-group-header>
    <fdp-list-item>
        <fdp-list-item-title>Item 1</fdp-list-item-title>
        <fdp-list-item-actions>
            <fdp-button>Delete</fdp-button>
        </fdp-list-item-actions>
    </fdp-list-item>
    <fdp-list-item>
        <fdp-list-item-title>Item 2</fdp-list-item-title>
        <fdp-list-item-actions>
            <fdp-button>Delete</fdp-button>
        </fdp-list-item-actions>
    </fdp-list-item>
    <fdp-list-item>
        <fdp-list-item-title>Item 3</fdp-list-item-title>
        <fdp-list-item-actions>
            <fdp-button>Delete</fdp-button>
        </fdp-list-item-actions>
    </fdp-list-item>
    <fdp-list-footer>Footer</fdp-list-footer>
</fdp-list>

<!-- Byline list items -->
<fdp-list>
    <fdp-list-group-header>Group Header</fdp-list-group-header>
    <fdp-byline-list-item>
        <fdp-list-item-title>Item 1</fdp-list-item-title>
        <fdp-list-item-byline>
            byline
            <fdp-list-item-secondary-byline>secondary text</fdp-list-item-secondary-byline>
        </fdp-list-item-byline>
        <fdp-list-item-action><fdp-button>Delete</fdp-button></fdp-list-item-action>
    </fdp-byline-list-item>
</fdp-list>

List Component

Property Bindings

isBorderless: Boolean

Sets whether or not to show item borders.

isSelectable: Boolean

Sets whether or not the list will be selectable. If true then all contained list items will have a checkbox element, and the element will emit a itemSelectChange event upon user interaction.

Events

itemSelectChange

When user clicks on any of the item checkboxes an itemSelectChange event will be fired. The event payload will include the values of items that were selected.

Projected Content

The List component expects its content to contain components of type ListItem, BylineListItem, ListGroupHeader or ListFooter.

ListItem Component

Property Bindings

value: any

Sets the data for the item which will be included in the itemSelectChange payload if the item is selected.

Projected Content

fdp-list-item-title

This component identifies the title for the ListItem.

fdp-list-item-info

This component identifies additional information which will be right justified in the ListItem.

fdp-list-item-action

This component identifies the buttons which will be right justified in the ListItem.

BylineListItem Component

Property Bindings

value: any

Sets the data for the item which will be included in the itemSelectChange payload if the item is selected.

Projected Content

fdp-list-item-title

This component identifies the title for the ListItem.

fdp-list-item-byline

This component identifies the primary byline that will appear under the title, left justified.

fdp-list-item-secondary-byline

This component identifies the secondary byline that will appear under the title, right justified.

fdp-list-item-info

This component identifies additional information which will be right justified in the ListItem.

fdp-list-item-action

This component identifies the buttons which will be right justified in the BylineListItem.

ListGroupHeader Component

This component will display its text content as a group header.

ListFooter Component

This component will display its text content as the list footer.