Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Select
Custom Inputs
Components
Navigation
Components
68
Micro Charts
Libraries
Kanban Board
Image Designer
Video Player
Visual Builder
Content Editor
Data View
Purchase

List

List displays a vertical group of related rows: settings, files, messages, activity, compact collections, simple navigation rows, or selectable options.

Use the row slots for consistent structure: icon or avatar on the left, title and secondary lines in the center, and metadata or actions on the right.

Use ngs-selection-list with ngs-list-option when users choose one or more rows. Use ngs-nav-list for simple navigation lists, and ngs-action-list for vertical action groups that are not dropdown menus.

Do not use List for large tabular data, columns, sorting, pagination, or bulk operations; use Table or DataView. Do not use it for trigger-based dropdown actions; use Menu. Do not use it as a generic layout container.

The NgStarter Angular List component lets you display a vertical group of related rows with consistent icon, avatar, title, line, meta, action, and selection structure. Use ngs-list with ngs-list-item for settings rows, files, messages, activity feed items, compact collections, simple action rows, and small repeated row groups. It includes examples for Basic List, List With Sections, List With Selection, and List With Single Selection.

Basic List

Use a basic list for a small vertical group of related rows.

Item 1
Item 2
Item 3

List With Sections

Use subheaders and dividers when one list contains related row groups.

Folders
Photos
Jan 1, 2016
Recipes
Jan 17, 2016
Work
Jan 28, 2016
Notes
Vacation Itinerary
Feb 20, 2016
Kitchen Remodel
Jan 18, 2016

List With Selection

Use a multiple selection list when users can choose several rows from the same set.

Boots
Clogs
Loafers
Moccasins
Sneakers

Options selected: 0

List With Single Selection

Use a single selection list when exactly one row can be selected from a set.

Boots
Clogs
Loafers
Moccasins
Sneakers

Option selected: None

List Variants

Use title, line, icon, avatar, and meta slots to keep one-line, two-line, and three-line rows aligned.

Single line lists

This is the title
Also the title

Two line lists

Title
Second line
Title
Second line
Title
Second line

Three line lists

Title
Second lineThird line
Title
Second line. This line will truncate.
Third line
Title
Second line. This line will truncate.
Third line

Three line list with secondary text wrapping

Title
Secondary line that will wrap because the list lines is explicitly set to 3 lines. Text inside of a `ngsListItemTitle` or `ngsListItemLine` will never wrap.
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est

Nav List

Use nav list for simple navigation rows inside sidebars or compact navigation areas.