Доставка еды
Трекер заказа: статусы проигрываются, курьер едет по маршруту
Демонстрация трекера доставки: слева четыре статуса — принят, готовим, курьер выехал, у двери — с вертикальной линией, которая заполняется, и временем у каждого; справа карточка-«телефон» с картой, пунктирным маршрутом от кухни до дома и курьером, который едет по кривой через CSS offset-path. Шаги проигрываются таймерами по кнопке «показать, как это выглядит», в конце всплывает сообщение от курьера. Слушает vibeui-cart:checkout и стартует сам.
Что можно поменять
- eyebrow, title, lede, playLabel, replayLabel, courierName
- steps: title, text, time, after (мс), progress (0–100)
- цвет курьера и маршрута — через accent
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/delivery-004?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Для разработчика
Команда установки — в блоке «Исходник компонента» ниже: подписанная ссылка действует сутки.
Теги
- delivery
- tracker
- order-status
- timeline
- courier
- map
- offset-path
- motion-path
- animation
- demo
- event
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…