PhiaUi.Components.Toc (phia_ui v0.1.17)

Sticky table of contents with scroll-spy via IntersectionObserver.

Uses the PhiaToc hook from priv/templates/js/hooks/toc.js. The hook watches heading elements in the page and marks the active TOC link with data-toc-active as the user scrolls.

Two components:

toc/1 — the sticky nav container
toc_item/1 — an individual TOC link with depth indent and active state

Summary

Functions

toc(assigns)

Renders a sticky table of contents with IntersectionObserver scroll-spy.

toc_item(assigns)

Renders an individual table of contents link.

Functions

toc(assigns)

Renders a sticky table of contents with IntersectionObserver scroll-spy.

Place heading elements in the article with matching id attributes. The PhiaToc hook marks the visible heading's corresponding toc_item with data-toc-active, which triggers data-[toc-active]:text-primary styling.

Attributes

id (:string) (required) - Required for phx-hook.
title (:string) - Defaults to "On this page".
sticky (:boolean) - Adds sticky top-6 positioning. Defaults to true.
class (:string) - Defaults to nil.
Global attributes are accepted.

Slots

inner_block (required) - toc_item/1 children.

toc_item(assigns)

Renders an individual table of contents link.

The hook sets data-toc-active on the link corresponding to the currently visible heading, triggering the data-[toc-active]:text-primary style.

Attributes

id (:string) (required) - The heading element ID to scroll to (e.g. 'introduction').
depth (:integer) - Nesting depth: 1=H2, 2=H3, 3=H4. Defaults to 1.
class (:string) - Defaults to nil.
Global attributes are accepted.

Slots

inner_block (required)