Lists are used to present related content in a simple and scannable format.
Race Result
Race Result
Note that this component may require additional styling.
<mat-list> is a container component that wraps and formats a series of line items. As the base list component, it provides Material Design styling, but no behavior of its own.
Note that this component may require additional styling.
Lists are out-of-the-box functionality.
You simply need to select the Navigation list from the toolbox on the right.
There are two styles that you can add to your lists. Under the Appearance tab of the widget, find the Class field and specify “unordered” for a bulleted list or “ordered” for a numbered list.
The Mendix toolkit can be found here.
Use the codes below to add this component to your project. Download the latest version of the library to easily implement our full range of components.
Execute the following command to install this component.
Import the following into your app.module.ts file.
| Name | Type | Default | Description |
|---|---|---|---|
| heading | string |
The list’s heading |
|
| lists | any |
for eg:- [{ text: "Vehicula Magnaaa" }, { text: "ABC" }, { text: "Proin tincidunt, neque sed consequat blandit" }] |
|
| listType | string | ordered |
Two types of lists: ordered and unordered |
Import the following into your theme or page.
Import the following into your theme or page.
There are two types of lists:
Unordered (bulleted) lists and Ordered (numbered) lists.
Both list types also support ‘nesting’.
Unordered lists use bullet-points to group items.
Ordered lists use numbers to group items in a specific order.
Lists are left-justified. If they appear among other content (e.g. under a paragraph) they should be aligned underneath, indented once.
Nested lists (lists within lists) are aligned underneath parent list items, indented once. Make sure to change bullet point/number type to ease list navigation.
Nested lists are difficult to read, especially across multiple devices where formatting may get altered. Work with your content writer to find alternatives to nested lists.
Don’t let lists get too long. Work with your content writer to find alternatives to long lists that avoid overwhelming your user. Consider:
Keep the copy in bulleted and numbered lists grammatically parallel. Each list item should use consistent styling, starting with the same part of speech.
If you have 2 or more bullets with similar structures, rewrite the introduction to include the shared content. This allows for shorter list items.
| Guidelines | Examples | |
|---|---|---|
| Recommended length | Use as needed to complete the thought but keep it as concise as possible |
|
| Line wrap | Minimize but not recommended; bullet text should wrap under itself and not under the bullet |
|
| Phrasing | Choose whether your list items will be complete sentences or fragments and stick to this convention |
|
| Case | Sentence case; lists made up of fragments don’t require punctuation at the end |
|
Use sentence case. It helps with legibility.
Keep the copy short for each list item so it’s clear and not cluttered.
You might want to use a table instead of a list as alternative, especially if you need to sort or compare items.
| 1. Sign in to your Canada Post account |
| 2. Enter your postal code |
| 3. Click on Track |
Screen readers detect unordered lists, but do not usually distinguish the levels of indentation. If you find yourself using nested lists, use a different bulleting/numbering system in the primary and secondary levels to help users with screen readers distinguish between them.
Ensure that unordered lists use the correct <ul> tags and ordered lists use the correct <ol> tags to help screen readers navigate the list structure as a group of related elements.
The sub-list for a list item can be presented as a nested list. The developer must code a nested list so that the sub-list is between the opening and closing tags of its parent list item.
Providing a list label can be useful for screen reader users — especially when there are many lists on the page or the list represents quick steps.
Please note: Labelling lists is a good practice but be careful with the length of the label. Labels shouldn't be more than 3 to 5 words and should be clear and descriptive. Using lengthy list labels can be more frustrating than not using them. It’s not necessary to use labels for all lists.
The list can be labelled in three ways:
Option 1
Using aria-labelledby when the label is visible on the page. aria-labelledby will sit on the list element or and has the value of the ID of the element containing the visible label.
Option 2
Using aria-label when the label isn't visible on the page. aria-label will sit on the list element or and has the string value representing the label.
Option 2
Using the title attribute when the label isn't visible on the page. The title attribute will sit on the list element (<ul> or <ol>) and will have a string value representing the label. The title attribute approach isn’t recommended because the attribute comes last in the accessible name calculation for an element. If one of aria-labelledby or aria-label is present on the list, then the title attribute would provide an accessible description.
Bullets or numbers may be hidden from lists for aesthetic reasons. This isn't a problem, but screen reader users still need to perceive the logical grouping. As a result, list semantics must be maintained.
Whenever bullets or numbers are hidden, add role=list to the list element (<ul> or <ol>). This ensures all assistive technologies keep the list semantics. Some assistive technologies ignore the semantic information when the bullets are removed.
When designing a table of contents as a list, put a visible heading before the list of links. Associate the heading with the list using an aria-labelledby attribute on the list element (<ul> or <ol>). The whole component can also be enclosed in a navigation region, depending on the context. For example, the HTML nav element or role=navigation on a div.
When testing a list, the tester must ensure:
