Styles
Using this Component
Collection views are used to display lists of items.
Types
1. List
For displaying vertical lists of items. Desirable when horizontal space is limited but vertical space is not.
2. Inline
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.
Editing
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.
Header
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).
Alternatives
When more than the list item name need to be displayed, consider using UIPlatformTable.
Structure
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.
3. Action
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).
Behavior
Clickable Area
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.
Adding Items
Items are added to a collection using an action in another component. This is most often through a “+ Add” text button on a UIHeader.
Removing Items
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.
Truncation
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 (…).
Related Components
Playground Coming Soon!
Styles
Using this Component
Collection views are used to display lists of items.
Types
1. List
For displaying vertical lists of items. Desirable when horizontal space is limited but vertical space is not.
2. Inline
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.
Editing
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.
Header
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).
Alternatives
When more than the list item name need to be displayed, consider using UIPlatformTable.
Structure
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.
3. Action
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).
Behavior
Clickable Area
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.
Adding Items
Items are added to a collection using an action in another component. This is most often through a “+ Add” text button on a UIHeader.
Removing Items
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.
Truncation
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 (…).