Using this Component
Collection views are used to display lists of items.
For displaying vertical lists of items. Desirable when horizontal space is limited but vertical space is not.
For displaying a comma-separated list of items. A select number of items are displayed, after which a new line with "X more..." text button appears, which can trigger a modal that displays the truncated items.
Collection views are ideal for displaying a list of items that can be added to or removed by the user. When a list is not editable, the actions to remove or add list items are hidden.
Collection views have no built-in label and should be used in combination with a UIHeader. The header provides context around the content of the collection, as well as displaying an action to add to the list (when relevant).
When more than the list item name need to be displayed, consider using UIPlatformTable.
1. List Item
Each item within the Collection exists as a single row in the list. List items are formatted with an icon to the left of the item name.
2. Divider Line
List items are separated by a dotted divider line. This does not appear above the first, or below the last items in the list.
Icon actions on each list item appear on the right side when hovering over the row. This is most commonly a removal action using ficon-close.
4. Header (often)
Collection lists are usually used in conjunction with a UIHeader. The header labels the collection, and houses the “+ Add” action (when relevant).
List items are often links to other pages and objects. On hover, a list item text indicates that it is a link by appearing in the color al-link. When the text is clicked, it navigates to the relevant page.
Items are added to a collection using an action in another component. This is most often through a “+ Add” text button on a UIHeader.
List items are removed from a collection via an icon action shown on hover over that list item. Items that can’t be edited do not display this action on hover.
List items are limited to a single line of text. If a value does not have enough room to display the full string, it is truncated using an ellipsis (…).
Component code details are not currently available on this site, but we're working on it!
Checkout this UIKit component's code and comments in the codebase for usage examples, props, and more.