Мини-гайд - Как сделать динамический progress bar для сервиса доставки


1. Создаем option list Statuses со статусами (у нас 7 статусов) и дополнительным атрибутом Order, где будет храниться порядковый номер статуса

2. Создаем state на главной странице для хранения статуса index status. При получении текстового статуса из источника мы будем сравнивать его с Statuses Display и сохранять в state. (Get Option - Statuses: All options - filtered by Display = нас текстовый статус)

3. Создаем repeating group со списком наших статусов отсортированных по порядку (Get Option - Statuses: All options - sorted by Order)

4. Создаем группу с align to parent layout, чтобы наложить визуальные элементы друг на друга - черную полосу (max width = 150px), белый кружок и черный кружок побольше (невидимый по дефолту). Все центрируем.

5. Обрезаем углы по бокам у полоски - для этого делаем 2 условия, где Statuses’s Order = 1/7 (у нас 7 статусов). Устанавливаем ряд изменений - max width 75 px (половина от изначальной), border roundness left/right top/bottom и alignment center left/right. Таким образом для первых и последних статусов будет отображаться лишь половина полосы справа или слева.

6. Чтобы показать текущий этап, устанавливаем условие видимости для большого кружка - parent group Statuses’s Order is index’s status’s order.

7. Чтобы отметить прошедшие этапы, устанавливаем условия смены цвета белого кружка на красный - parent group Statuses’s Order <= index’s status’s order.

8. (опционально) Допустим, нам нужно отметить прошедшие этапы на полосе, закрасив ее зеленой. Так как точка у нас располагается посередине отрезка, нам нужно закрашивать его наполовину, для этого добавим дополнительную половинку зеленой полосы. Добавляем черной полосе условие смены цвета parent group Statuses’s Order < index’s status’s order и добавляем спрятанную зеленую полоску с alignment center left и max width 75 px, показываем ее по условию Statuses’s Order != 1 (у нас 7 статусов). Таким образом мы будем закрашивать левую половину у полосы до точки посередине.

Лучше делать полосу вертикальной, чтобы решение было адаптивным для мобильных экранов. (на последнем скрине решение у Fedex)

А как бы это сделали вы?

Ставьте лайк и подписывайтесь, я выстраиваю систему генерации контента, поэтому скоро его станет еще больше (позже расскажу и о системе)