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.

Usage Code

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

Attribute	Description	Values	Default
items	Set steps and their states	Array of Objects	–
theme	Set the color scheme of the component	`light`, `dark`	`light`

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>