Mode

Choose a recipe
Make a list of the ingredients
Take the ingredients
Prepare the dish following the recipe's instructions
Enjoy the dish!

Code

vue

<script setup>
import { useTimelineDemo } from './timeline-demo';

const { isDark, timelineItems } = useTimelineDemo()
</script>

<template>
	<Timeline
		:items="timelineItems"
		:mode="isDark ? 'dark' : 'light'"
	/>
</template>

INFO

The mode property can be dynamic. In this example it depends on Vitepress theme's light/dark mode. For implementation in other environments it can directly depend on the settings of the theme used. In this way the timeline component is completely flexible.

Mode ​

Code ​

Mode

Code