Горизонтальная шкала-линейка в углу прокручиваемого блока показывает, где вы находитесь на длинной странице. Бегунок едет по делениям вместе с прокруткой, его можно тянуть мышью или пальцем, а щелчок по шкале сразу переносит к нужному месту.
Над шкалой всплывает карточка с коротким фрагментом кода для текущего раздела: она выезжает снизу при смене раздела, а кнопка в углу копирует код в буфер обмена. При наведении на шкалу полупрозрачная метка показывает, куда перейдёт страница.
Скопируйте эти файлы в components/scroll-ruler/:
Общие помощники положите в lib/ проекта:
Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.
import { ScrollRuler } from "@/components/scroll-ruler/scroll-ruler";
export default function Page() {
return (
<div className="relative h-[640px] w-full">
<ScrollRuler ticks={40} accentColor="#66d9e8" />
</div>
);
}sections?Разделы страницы: заголовок, код для карточки и флаг showCard
Тип ScrollRulerSection[]·По умолчанию SCROLL_RULER_SECTIONS
ticks?Количество делений на шкале
Тип number·По умолчанию 40
trackHeight?Высота шкалы в пикселях
Тип number·По умолчанию 40
accentColor?Цвет бегунка, метки наведения и имени переменной в карточке
Тип string·По умолчанию цвет brand
showCards?Показывать карточку с кодом над шкалой
Тип boolean·По умолчанию true
className?Дополнительные классы корневого блока
Тип string