Ruler-style timeline for plotting milestones along a horizontal or vertical axis.
Installation
Copy the Source Code
Copy and paste the following code into your project:
index.ts
timescale-age.svelte
timescale-content.svelte
timescale-header.svelte
timescale-intro-scroll.svelte
timescale-item.svelte
timescale-rail.svelte
timescale-tick.svelte
timescale-track.svelte
timescale-viewport.svelte
timescale-year.svelte
timescale.svelte
Usage
usage.svelte
Features
- Ruler-style timeline for plotting milestones along a horizontal or vertical axis
- Composable subcomponents for header, track, ticks, and content
- TimescaleIntroScroll auto-scrolls a horizontal timeline to its latest item on mount, respecting prefers-reduced-motion
Props
Timescale
Root layout that sets the timeline orientation for its primitives.
| Name | Type | Default | Description |
|---|---|---|---|
children | Snippet | required | Timescale primitives rendered inside the root. |
orientation | 'horizontal' | 'vertical' | 'horizontal' | Direction used to lay out the timeline. |
class | string | undefined | Additional classes applied to the root element. |
ref | HTMLDivElement | null | null | Bindable reference to the root element. |
TimescaleIntroScroll
Wrapper that performs the initial horizontal scroll animation.
| Name | Type | Default | Description |
|---|---|---|---|
children | Snippet | required | Timescale content containing a viewport. |
Timescale layout primitives
Shared API for Age, Content, Header, Item, Rail, Tick, Track, Viewport, and Year.
| Name | Type | Default | Description |
|---|---|---|---|
children | Snippet | undefined | Content rendered inside the selected timescale primitive. |
class | string | undefined | Additional classes applied to the primitive element. |
ref | HTMLElement | null | null | Bindable reference to the primitive's underlying element. |