Progress tracker
Ask a question
Design guidelines
Summary
A progress tracker guides users through a number of steps across multiple screens in order to complete a task
flow. It shows users where they are in the process, and also offers navigation within the process.
Status
API status:
general
Included in AUI core?
Not in core You must explicitly require the web
resource key.
Web resource key:
com.atlassian.auiplugin:aui-progress-tracker
AMD Module key:
N/A
Experimental since:
5.0
General API status:
5.8
Examples
Default:
Configure instance Select plugins
Invite users Confirm
Inverted:
Configure instance Select plugins Invite users
Confirm
Code
Soy
{call aui.progressTracker.progressTracker}
{param steps: [
[
'text': 'Step 1',
'href': '#step1'
],
[
'text': 'Step 2',
'href': '#step2',
'isCurrent': true
],
[
'text': 'Step 3',
'href': '#step3'
],
[
'text': 'Step 4',
'href': '#step4'
],
[
'text': 'Step 5',
'href': '#step5'
]
] /}
{/call}
Options
Soy is available
/**
* Progress Tracker
* @param steps list of the steps to display
* @param? isInverted boolean - set to true if using on a grey background
* @param? id
* @param? extraClasses
* @param? extraAttributes
*/
/**
* Step in the Progress Tracker
* @param? isCurrent boolean - set to true if step is the current step
* @param width number - should be the exact same width as all the other steps to maintain correct visual formatting (can't do this in CSS due to CSS not knowing the number of steps)
* @param text
* @param? href
* @param? id
* @param? extraClasses
* @param? extraAttributes
**/