CoreStepper

Живой MDC-рендер и исходник для копирования.

Живой рендер

Так ContentRenderer отрисует этот контент на реальной странице.

Шаги процесса: подписи и пояснения — массив items ({ label, description? }), передаётся JSON-биндингом :items='[…]'; текущий шаг — model-value. Без clickable` шаги — статичный индикатор этапов.

Статичный индикатор этапов

1Корзина
2ДоставкаАдрес и время
3Оплата

С текущим шагом

model-value подсвечивает пройденные и текущий шаг:

Корзина
2ДоставкаАдрес и время
3Оплата

Исходник (MDC)

Тот же код текстом — скопируйте в свой контент как есть.

MDC

Шаги процесса: подписи и пояснения — массив `items` (`{ label, description? }`), передаётся JSON-биндингом `:items='[…]'; текущий шаг — `model-value`. Без `clickable` шаги — статичный индикатор этапов.

### Статичный индикатор этапов

::core-stepper{:items='[{"label":"Корзина"},{"label":"Доставка","description":"Адрес и время"},{"label":"Оплата"}]'}
::

### С текущим шагом

`model-value` подсвечивает пройденные и текущий шаг:

::core-stepper{:items='[{"label":"Корзина"},{"label":"Доставка","description":"Адрес и время"},{"label":"Оплата"}]' model-value="1" flow}
::