Nav open / close arrow

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

Last Updated

October 9, 2019

Coming soon...

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.