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.
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. The divider for the list will bleed into the right margin, if possible. If that is not possible then it will get cut off by the margin padding for the container it is in. The last item in the list will not have a divider.
Developer DocsVue Developer Docs
Component documentation coming soon!