Steps

Внешний вид​

info

Важно! Значения ItemView применяются к шагу только когда его статус — active.

Внешний вид компонента регулируется 3 свойствами:

View​

Свойство применяется ко всему компоненту и принимает следующие значения:

  • default
  • accent

ItemView​

Свойство применяется к индикатору активного шага и заголовку, и принимает следующие значения:

  • default
  • negative
  • warning
  • positive

CompletedItemView​

Свойство задаётся на каждом шаге отдельно через items[n].completedItemView и позволяет переопределить внешний вид индикатора и заголовка для завершённых шагов (status: 'completed'). Принимает следующие значения:

  • default
  • accent
  • negative
  • warning
  • positive

Тип индикатора​

Свойство indicator каждого шага определяет, что отображается в индикаторе:

Live Editor
Result
Open in CodeSandbox

Внешнее управление​

Live Editor
Result
Open in CodeSandbox

Управление через onChange и статус шага​

Live Editor
Result
Open in CodeSandbox

Использование свойства ItemView​

Live Editor
Result
Open in CodeSandbox

Использование свойства completedItemView​

Свойство completedItemView задаётся на каждом шаге индивидуально и позволяет переопределить внешний вид завершённого шага.

Live Editor
Result
Open in CodeSandbox