Path
Paths are horizontal process flows composed of a series of stages.
Examples
Structure
Guidelines
When to use
- When there is a process with unique content at each stage, for example, a DevOps lifecycle.
When not to use
- To segment tasks that are related and linear, use a stepper instead.
- To represent percentage of completion or progress of an activity, process, or task, use a progress bar instead.
Variants
- Simple Path: A simple path only contains stages with labels.
- Counter Path: A counter path contains stages with a counter badge showing the number of items it contains. If there are any âAll,â âOverview,â or âSummaryâ stages, then the counter of that stage should equal the sum total of all the others. Counters shouldnât be included if they break this pattern.
- Metric Path: A metric path contains stages with an abbreviated metric, such as 12d or 1.5h. The metric can be an integer or float, but should be limited to 5 digits maximum (and fewer when possible). Donât use multiple metric types on a single path. For example, 1d and 6kg.
- Combination Path: Some processes may be more complicated and require a path with a combination of icons, counters, and metrics. An icon can also be used at a specific stage, such as an âOverview,â to make it stand out more. Try to limit path complication by only using necessary attributes.
Accessibility
Keyboarding
| Key | Action |
|---|---|
| Tab | When focus is outside of the path, moves focus to the active stage. If focus is on the active stage, moves focus to the content within the content of that stage |
| â | Focuses and activates the next stage in the path. If the current tab is the last tab in the tab list, it activates the first tab. |
| â | Focuses and activates the previous stage in the path. If the current tab is the first tab in the tab list, it activates the last tab. |
GlPath
Implemetation
The component should be initialized with an array of data objects. By default, the first item in the array will be selected. This can be overridden by passing in an object with the selected property set to true.
items: [
{
title: 'First',
},
{
title: 'Second',
selected: true
},
...
Once an item has been selected the selected event will be emitted.
The emitted event will include the entire object at the selected index.
Customization
Additional attributes can be configured via the items object. Currently
support for metric and icon are provided. Please see the individual
examples for further information on these.
Additional information
A backgroundColor property can be specified when using this component
on different colored backgrounds.
This component supports various themes and is mobile responsive.
Last updated at:Â