VibeUI
РусEng
Войти

Отраслевые секции

Этапы работ диаграммой Ганта, по которой едет маркер при прокрутке

Этапы ремонта как диаграмма Ганта на sticky-сцене: секция выше экрана, внутри липкая панель с полосами этапов по неделям. Пока страница прокручивается сквозь секцию, по шкале едет маркер «вы здесь · нед N», полосы заливаются акцентом ровно на пройденную долю, текущий этап раскрывает описание и бригаду в карточке справа, пройденные получают галочку. Прогресс считается из положения секции в scroll-обработчике.

React + Tailwind, совместим с shadcn: нажмите «Копировать для ИИ» — агент в Cursor или Claude Code поставит его через shadcn CLI.

Что можно поменять

  • eyebrow, title, lede, fine, hereLabel
  • stages: name, start, weeks, text, crew
  • totalWeeks

Собран из

Команда установки поставит и эти компоненты. Блок задаёт им только пропсы: их палитра и поведение — свои.

Ссылка для ИИ-агента: в ней превью, код и инструкция.

Превью

1440pxТема страницы
Этапы работ диаграммой Ганта, по которой едет маркер при прокрутке — Этапы ремонта как диаграмма Ганта на sticky-сцене: секция выше экрана, внутри липкая панель с полосами этапов по неделям. Пока страница прокручивается сквозь секцию, по шкале едет маркер «вы здесь · нед N», полосы заливаются акцентом ровно на пройденную долю, текущий этап раскрывает описание и бригаду в карточке справа, пройденные получают галочку. Прогресс считается из положения секции в scroll-обработчике.

Использовать с ИИ

  1. 1. Скопируйте ссылку.
  2. 2. Напишите агенту своими словами и вставьте её в предложение.
  3. 3. Агент откроет ссылку и поставит компонент из реестра.
AI
1Выбрали здесь

добавь это на главную первым экраном:

https://vibeui.ru/c/renovation-002?theme=dark

2Вставили в чат агента
3Получили в проекте

Не знаете, куда вставить? Пошаговый гайд

Показать полную инструкцию

То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.

Загружается…

Как использовать

<Renovation002
  title="12 недель по календарю"
  stages={[
    { name: "Демонтаж", start: 0, weeks: 1, text: "Снимаем всё до бетона.", crew: "Игорь + 3" },
    { name: "Электрика", start: 1, weeks: 2, text: "Штробы, кабель, щит.", crew: "Дмитрий" },
  ]}
/>

Пример вызова. Сам компонент агент ставит из реестра по ссылке «Копировать для ИИ».

Настройки

Заголовок
title · по умолчанию: 12 недель по календарю, а не «как пойдёт»
Ярлык маркера
hereLabel · по умолчанию: вы здесь
Тема
tone · по умолчанию: auto
Акцент
accent · по умолчанию: цвет темы
Текст
ink · по умолчанию: цвет темы
Фон
background · по умолчанию: цвет темы

Используется в сценариях

Ещё в разделе «Отраслевые секции»

Частые вопросы

Как установить компонент «Этапы работ диаграммой Ганта, по которой едет маркер при прокрутке» через Cursor или Claude Code?
Нажмите «Копировать для ИИ» на этой странице и вставьте текст в чат агента. В инструкции команда установки через shadcn CLI, зависимости и что сохранить — агент поставит именно этот компонент, а не перерисует похожий.
Какие зависимости у компонента «Этапы работ диаграммой Ганта, по которой едет маркер при прокрутке»?
Никаких npm-пакетов, кроме React и Tailwind CSS. Вместе с ним ставятся компоненты каталога: card-095.
Что можно поменять в компоненте «Этапы работ диаграммой Ганта, по которой едет маркер при прокрутке»?
Можно менять: eyebrow, title, lede, fine, hereLabel; stages: name, start, weeks, text, crew; totalWeeks. Сохранить как есть: импорты card-095 из @/components/vibeui/ — не встраивать их код в блок и не заменять своими; частям уходят только пропсы; track — min-height из svh (steps × 34svh + 100svh), внутри stage со sticky:top:0 и max-height:100svh; progress = -rect.top / (rect.height - innerHeight), clamp 0..1, обновление через requestAnimationFrame; полоса — left и width из --start/--len/--total в calc, заливка ::after через scaleX(--p), где p = (week - start)/weeks.
Компонент «Этапы работ диаграммой Ганта, по которой едет маркер при прокрутке» бесплатный?
Превью открыто всем, исходник доступен по подписке PRO.

Для разработчика

npx shadcn@latest add https://vibeui.ru/r/pro/renovation-002.json

Команде нужна подписанная ссылка: войдите и откройте «Исходник компонента» ниже — там рабочая ссылка на 30 минут. Все способы установки

Технические заметки

Составной блок: импортирует card-095 из @/components/vibeui/ — команда установки приносит их вместе с блоком. Блок владеет раскладкой и своим текстом, частям передаёт только пропсы, их палитры --vibeui-<name>-* не трогает.

Теги

  • gantt
  • timeline
  • stages
  • process
  • schedule
  • renovation
  • construction
  • scroll-driven
  • sticky
  • weeks
  • roadmap
  • composite
Исходник компонента

Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.

Загружается…