Lists are continuous, vertical indexes of text that have the option to be selectable or not. The list component is not consistently made up of specific atoms or molecules.
The left slot is for content that exists outside of the divider. The content in any of the three slots can be any atom or molecules and will be defined by the design.
- Left Slot (Optional)
- Middle Slot
- Right Slot (Optional)
- Divider (Optional)
Lists may need a global header attached to them to give it a grouping name and allow a global action to the entire header. The items within the header are center aligned with the title being left aligned and the action being right aligned.
- List heading - Subtitle 1
- Compact Button or Small QAB (Optional)
- 2px line (Optional)
The left slot content outside of the divider will be left aligned.
The content within the middle slot will be left aligned and either top aligned if it is more than one line of content or vertically aligned if it is only one line of content.
The right slot content may be a type of action item, like a quick action button or switch, but it can also be additional data. All content can reside in a top, middle or bottom placement within the right slot. The action items will always be in the middle placement.
The height of a list item will grow with additional content added to it but the minimum height of a list component is 73px.
The height of the slots will grow with additional content added to it but the minimum height of the slots will be 40px.
List Row Reordering
When list reordering is needed, the grab and sort icons can either be surfaced when it is the main objective for the user or shown on hover for ayn advanced user needs. Note: The entire container is clickable to grab and drop.
Elevation is considered when rows are dragged to be sorted.
The right spacing on the list component is optional. There are use cases when we need the padding and when we do not. Flutter by default will have the padding but Iris Vue by default will not.
The list component can be in a read only state or the entire component can be clickable to go to another page.
No theming considerations for the list component.
The list component can be used anywhere where a group of details is needed. Single column lists don't have a bottom line on the last item. Multi-column lists do have a line on the last item. On Flutter, the list component will go into the right margin padding but in HTML it does not.
Developer DocsVue Developer Docs
Component documentation coming soon!