Timeline - Material

The timeline components helps you to simply create a beautiful timeline for your pages. It contains two components the TimelineList and the TimelineItem.

Demo

Timeline

$2400 Design changes

22 DEC 7:20 PM

People care about how you see the world, how you think, what motivates you, what you’re struggling with or afraid of.

New order #1832412

21 DEC 11 PM

People care about how you see the world, how you think, what motivates you, what you’re struggling with or afraid of.

Server payments for April

21 DEC 9:34 PM

People care about how you see the world, how you think, what motivates you, what you’re struggling with or afraid of.

<template>
  <timeline-list title="Timeline">
   <timeline-item
    color="success"
    :icon="{ component: 'notifications', class: 'text-white text-sm' }"
    title="$2400 Design changes"
    date-time="22 DEC 7:20 PM"
    description="People care about how you see the world, how you think, what motivates you, what you’re struggling with or afraid of."
  />
   <TimelineItem
    color="danger"
    :icon="{ component: 'code', class: 'text-white text-sm' }"
    title="New order #1832412"
    date-time="21 DEC 11 PM"
    description="People care about how you see the world, how you think, what motivates you, what you’re struggling with or afraid of."
  />
   <TimelineItem
    color="info"
    :icon="{ component: 'shopping_cart', class: 'text-white text-sm' }"
    title="Server payments for April"
    date-time="21 DEC 9:34 PM"
    description="People care about how you see the world, how you think, what motivates you, what you’re struggling with or afraid of."
  />
</timeline-list>
</template>

<script>
import TimelineList from "@/examples/Cards/TimelineList.vue";
import TimelineItem from "@/examples/Cards/TimelineItem.vue";
export default { components: { TimelineList, TimelineItem }, };
</script>

1<template>
2  <timeline-list title="Timeline">
3   <timeline-item
4    color="success"
5    :icon="{ component: 'notifications', class: 'text-white text-sm' }"
6    title="$2400 Design changes"
7    date-time="22 DEC 7:20 PM"
8    description="People care about how you see the world, how you think, what motivates you, what you’re struggling with or afraid of."
9  />
10   <TimelineItem
11    color="danger"
12    :icon="{ component: 'code', class: 'text-white text-sm' }"
13    title="New order #1832412"
14    date-time="21 DEC 11 PM"
15    description="People care about how you see the world, how you think, what motivates you, what you’re struggling with or afraid of."
16  />
17   <TimelineItem
18    color="info"
19    :icon="{ component: 'shopping_cart', class: 'text-white text-sm' }"
20    title="Server payments for April"
21    date-time="21 DEC 9:34 PM"
22    description="People care about how you see the world, how you think, what motivates you, what you’re struggling with or afraid of."
23  />
24</timeline-list>
25</template>
26
27<script>
28import TimelineList from "@/examples/Cards/TimelineList.vue";
29import TimelineItem from "@/examples/Cards/TimelineItem.vue";
30export default { components: { TimelineList, TimelineItem }, };
31</script>

Props Information

Name	Type	Description
title	String	Its a prop related to `TimelineList` and used to set the title for the timeline.
description	String	Its a prop related to `TimelineList` and used to set the description for the timeline.
darkMode	Boolean	Its a prop related to `TimelineList` and used to switch between light and dark mode of the timeline.
color	'success' 'primary' 'secondary' 'info' 'warning' 'error' 'dark' 'danger' 'light'	Its a prop related to `TimelineItem` and used to set the TimelineItem color.
icon*	Object	Its a prop related to `TimelineItem` and used to set the TimelineItem icon. It has the following keys and is a requierd prop. `component` of type string. `class` of type string.
title	String	Its a prop related to `TimelineItem` and used to set the `TimelineItem` title.
description	String	Its a prop related to `TimelineItem` and used to set the description for the timelineItem.
dateTime	String	Its a prop related to `TimelineItem` and used to set the `TimelineItem` date or time.