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 1Item 2Item 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.
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.
