List

Simple and flexible list component to display a series of rows.

Basic Usage

Basic list demonstrating header, footer, and bordered layout.

 Header 
Racing car sprays burning fuel into crowd.
Japanese princess to wed commoner.
Australian walks 100km after outback crash.
 Footer 
<prism-list header="Header" footer="Footer" [bordered]="true">
  <prism-list-item>Racing car sprays burning fuel into crowd.</prism-list-item>
  <prism-list-item>Japanese princess to wed commoner.</prism-list-item>
  <prism-list-item>Australian walks 100km after outback crash.</prism-list-item>
</prism-list>

Avatar & Meta Pattern

Common list item layout pattern with an avatar, title, and description.

Prism UI Concept Ant Design, a design language for background applications, is refined by Ant UED Team 
edit
Prism Architecture Ant Design, a design language for background applications, is refined by Ant UED Team 
edit
Prism Performance Ant Design, a design language for background applications, is refined by Ant UED Team 
edit
<prism-list [dataSource]="data()" [itemTemplate]="itemTpl" [bordered]="true">
</prism-list>

<ng-template #itemTpl let-item>
  <prism-list-item [extra]="actionTemplate">
    <prism-list-item-meta 
      [title]="titleTemplate" 
      [description]="item.description" 
      [avatar]="avatarTemplate">
    </prism-list-item-meta>
  </prism-list-item>

  <ng-template #titleTemplate>
    <a href="https://ng.ant.design">{{ item.title }}</a>
  </ng-template>

  <ng-template #avatarTemplate>
    <img [src]="item.avatar" alt="avatar" style="width: 40px; height: 40px; border-radius: 50%;" />
  </ng-template>

  <ng-template #actionTemplate>
     <a style="color: var(--prism-primary-color); cursor: pointer;">edit</a>
  </ng-template>
</ng-template>

Grid Mode

Automatically layout list items in a grid. This mode automatically drops to 1 column on mobile screens.

 Card content related to Prism UI Concept 
 Card content related to Prism Architecture 
 Card content related to Prism Performance 
<prism-list [grid]="{ gutter: 16, column: 3 }" [dataSource]="data()" [itemTemplate]="gridItemTpl">
</prism-list>

<ng-template #gridItemTpl let-item>
  <prism-list-item>
    <prism-card [title]="item.title">
      {{ item.description }}
    </prism-card>
  </prism-list-item>
</ng-template>

API Overview

Name	Type	Default	Description
`dataSource`	`any[]`	`undefined`	Array of data objects to render
`itemTemplate`	`TemplateRef<any>`	`-`	Template to render each item
`bordered`	`boolean`	`false`	Toggles rendering of the border around the list
`split`	`boolean`	`true`	Toggles rendering of the split under the list item
`header`	`string \| TemplateRef<unknown>`	`-`	List header content
`footer`	`string \| TemplateRef<unknown>`	`-`	List footer content
`loadMore`	`string \| TemplateRef<unknown>`	`-`	Load more content
`grid`	`{ gutter: number, column: number }`	`null`	Grid layout configs

prism-list-item-meta

Name	Type	Default	Description
`avatar`	`string \| TemplateRef<any>`	`-`	Avatar node of list item
`title`	`string \| TemplateRef<any>`	`-`	Title of list item
`description`	`string \| TemplateRef<any>`	`-`	Description of list item