UI MarCom 3

Steps Bar Stable Dark theme

The Steps Bar provides progress overview to the user in interactive multi-stage processes. It motivates the user to complete the process.

<uimc-steps-bar
  items='[
    {"title": "" }
  ]'
></uimc-steps-bar>

AttributeDescriptionValuesDefault
itemsSet steps and their statesArray of Objects
themeSet the color scheme of the componentlight, darklight

Working sample

<uimc-steps-bar
  items='[
    {"title": "Edit Data", "text": "Edit patient data" , "isCompleted": true },
    {"title": "Select Patient", "text": "Choose a patient" , "isCurrent": true },
    {"title": "Choose Exam", "text": "Select the exam type before scanning"  }
  ]'
></uimc-steps-bar>

Dark theme

<uimc-steps-bar theme="dark"
  items='[
    {"title": "Edit Data", "text": "Edit patient data" , "isCompleted": true },
    {"title": "Select Patient", "text": "Choose a patient" , "isCurrent": true },
    {"title": "Choose Exam", "text": "Select the exam type before scanning"  }
  ]'
></uimc-steps-bar>