TimelineNav — timeline-nav

PREVIEW

USAGE

case 'glass-button': return ; case 'neon-glow': return ; case 'floating-button': return ;

import { TimelineNav } from '@oalacea/chaosui/navigation/timeline-nav';

const eras = [
  { value: '2020', label: '2020', active: true },
  { value: '2021', label: '2021' },
  { value: '2022', label: '2022' },
];

<TimelineNav eras={eras} orientation="vertical" />

PROPS

PropTypeDefault

erasTimeline eras {value, label, active?}

TimelineEra[]-

orientationTimeline orientation

"horizontal" | "vertical""horizontal"

onEraClickEra click callback

(era: TimelineEra, index: number) => void-

showLabelsShow era labels

booleantrue

showLineShow connecting line

booleantrue

dotSizeDot size

"small" | "medium" | "large""medium"