GrScrollSpy

Примеры 3 у каждого — живое демо и его код

• Условия использования с живым оглавлением

  Оглавление стоит рядом с прокручиваемой областью, а не внутри неё, и компонент сам находит скроллпорт, поднимаясь от первого раздела. Каждый пункт остаётся <a href="#id">, поэтому средняя кнопка открывает его в новой вкладке; update-hash выключен лишь потому, что пример не должен переписывать адрес страницы.

  Your account

  You are responsible for what happens under your account. Keep your password private and turn on two-factor sign-in for every owner of a workspace.

  Last changed on 1 September 2026.

  Billing

  Plans are billed monthly or yearly in advance. Seats added during a period are charged pro rata on the next invoice; removed seats are credited the same way.

  Last changed on 1 September 2026.

  Your data

  Invoices, customers and files you upload stay yours. We process them only to run the service and keep them in the EU region you chose when the workspace was created.

  Last changed on 1 September 2026.

  Availability

  We aim for 99.9% monthly uptime. Planned maintenance is announced on the status page at least 48 hours ahead and never falls on the first working day of a month.

  Last changed on 1 September 2026.

  Ending the service

  You can close the workspace at any time from Settings. Data stays exportable for 30 days, after which it is deleted from backups as well.

  Last changed on 1 September 2026.

  Код и пропы

• Документация с вложенными разделами

  level задаёт отступ и aria-level, но список остаётся плоским: арифметике положения нужен порядок документа, а дерево позволило бы объявить вложенность, противоречащую порядку разделов на странице. Пока читается «With Vite», «Install» отмечен как его предок.

  Install

  Add the package and its peer dependency. The library ships ES modules and works with any bundler that understands them.

  npm i @feugene/granularity vue

  With Vite

  Register the plugin once; it wires the stylesheet and the icon set into the build.

  plugins: [vue(), granularity()]

  With Nuxt

  Use the module instead of the plugin: components are auto-imported and render on the server.

  modules: ['@feugene/granularity/nuxt']

  Theme

  Colours are roles, not values: change a role once and every component follows.

  --gr-primary: oklch(0.55 0.2 270);

  Dark mode

  Set data-theme on the root element, or let the system decide with prefers-color-scheme.

  <html data-theme="dark">
  Код и пропы

• Обзор предложения по комментариям

  Слот item отдаёт строку целиком — раздел, активен ли он, и activate, повторяющий клик. Проверяющий видит, где открытые комментарии, а отслеживание положения остаётся за компонентом; меняется только рисунок.

  Summary

  Northwind replaces three regional billing tools with one, cutting month-end close from six days to two.

  Scope

  In scope: invoicing, dunning and revenue reports for the EU entities. Out of scope: payroll and the US entity until Q2.

  2 open comments from finance

  Risks

  Historic invoices before 2021 are stored as PDFs only; importing them needs manual review of about 4,000 documents.

  3 open comments from finance

  Budget

  €86,000 one-off for migration and training, then €2,900 a month for 60 seats — below the three tools combined.

  1 open comment from finance

  Timeline

  Pilot with the Irish entity in November, the rest of the EU in January, old tools switched off in March.

  Код и пропы

API порождается из пакета · разойтись не может

import type { GrScrollSpyProps, GrScrollSpyEmits, GrScrollSpySection } from '@feugene/granularity/components/GrScrollSpy'

interface GrScrollSpyProps {
    /** Разделы в порядке их следования на странице. */
    sections: GrScrollSpySection[];
    /**
     * Отступ линии активации от верха скроллпорта. Число — пиксели, строка — как
     * есть. Почти всегда равен отступу липкой шапки (`--gr-affix-offset`).
     */
    offset?: number | string;
    /** Скроллпорт: элемент или селектор. Не задан — ищется от первого раздела. */
    scroller?: HTMLElement | string | null;
    /** Имя лендмарка `navigation`. Не задано — берётся из локали. */
    ariaLabel?: string;
    /** Обновлять `#hash` адреса при переходе. */
    updateHash?: boolean;
    /** Плавность прокрутки. Под `prefers-reduced-motion` всегда мгновенная. */
    behavior?: ScrollBehavior;
    /** Переносить фокус на раздел, как это делает переход по якорю. */
    focusTarget?: boolean;
    /** Выключить слежение за прокруткой: активный пункт снимается. */
    disabled?: boolean;
}

interface GrScrollSpyEmits {
    /** Сменился активный раздел; `null` — линия активации ещё не дошла до первого. */
    (e: 'activeChange', id: string | null): void;
    /**
     * Пункт выбран кликом: `id` раздела и сам клик. Клик с модификатором и `activate`
     * из слота его не шлют.
     */
    (e: 'select', id: string, event: MouseEvent): void;
}

interface GrScrollSpySection {
    id: string;
    label: string;
    /** Уровень вложенности, 1 — верхний. Влияет на отступ и цепочку предков. */
    level?: number;
}

const grScrollSpyConfig: import("@feugene/granum/contract").GranumComponentDescriptor<"GrScrollSpy">;

const grScrollSpySafelist: string[];

type GrScrollSpyInstance = ComponentExposed<typeof GrScrollSpyComponent>;

Доступность

Полный контракт пакета: docs/keyboard.md ↗

Связанные четвёртый вопрос: когда не это

• GrAffixУтилиты

  Само оглавление должно остаться на виду при прокрутке

• GrTabsНавигация

  Разделы переключаются, в DOM живёт только текущий

• GrStepsНавигация

  Шаги процесса с пройденностью и порядком

• GrBreadcrumbsНавигация

  Путь между страницами, а не внутри одной

• GrSidebarНавигация

  Навигация по разделам приложения

• GrBottomNavНавигация

  Навигация по разделам приложения

• GrMarkdownРедакторссылается сюда

  Берут, когда текст пришёл markdown-строкой и его надо показать оформленным.

• GrTreeSectionsДанныессылается сюда

  Берут, когда корни — категории, а не элементы.