A lightweight tree-like timeline component base on Vue2 without any dependency.
- Lightweight (without any dependency)
- Mobile friendly (RWD)
- Automatically sort by time and split into left and right sides
- Customize your content flexibly
npm install tree-like-timeline-vue2
Import tree-like-timeline-vue2
component
import TreeLikeTimeline from "tree-like-timeline-vue2";
export default {
components: {
TreeLikeTimeline,
},
};
Import tree-like-timeline-vue2.css
file
<style>
@import "tree-like-timeline-vue2/dist/tree-like-timeline-vue2.css";
</style>
Or
Import tree-like-timeline-vue2.css
in your main js or ts file
import "tree-like-timeline-vue2/dist/tree-like-timeline-vue2.css";
Vue template
<TreeLikeTimeline :data="list">
<template v-slot="{ item }">
<article>
<time>{{ item.time }}</time>
<h3>{{ item.title }}</h3>
<p>{{ item.content }}</p>
</article>
</template>
</TreeLikeTimeline>
Data
export default {
data() {
return {
list: [
{
time: "2013-04",
title: "What is Lorem Ipsum?",
content: "Lorem Ipsum is simply dummy text of the printing and typesetting industry."
},
{
time: "2014-03",
title: "What is Lorem Ipsum?",
content: "Lorem Ipsum is simply dummy text of the printing and typesetting industry."
},
{
time: "2014-05",
title: "What is Lorem Ipsum?",
content: "Lorem Ipsum is simply dummy text of the printing and typesetting industry."
offsetTop: "120px"
},
{
time: "2014-07",
title: "What is Lorem Ipsum?",
content: "Lorem Ipsum is simply dummy text of the printing and typesetting industry."
},
{
time: "2014-11",
title: "What is Lorem Ipsum?",
content: "Lorem Ipsum is simply dummy text of the printing and typesetting industry."
},
{
time: "2015-01",
title: "What is Lorem Ipsum?",
content: "Lorem Ipsum is simply dummy text of the printing and typesetting industry."
}
]
}
}
}
Pick a key as time (default as time
).
<TreeLikeTimeline :data="list" time-key="date">
<template v-slot="{ item }">
<time>{{ item.date }}</time>
</template>
</TreeLikeTimeline>
export default {
data() {
return {
list: [
{
date: "2013-04",
},
],
};
},
};
When the content of the nodes on both sides is completely side by side, you can independently adjust the node to be shifted downward.
<TreeLikeTimeline :data="list">
<template v-slot="{ item }">
<time>{{ item.time }}</time>
</template>
</TreeLikeTimeline>
export default {
data() {
return {
list: [
{
time: "2014-03",
title: "Where does it come from?",
content:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
},
{
time: "2014-05",
title: "Where can I get some?",
content:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
},
{
time: "2014-07",
title: "translation by H. Rackham",
content:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
},
{
time: "2014-11",
title: "de Finibus Bonorum et Malorum",
content:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
offsetTop: "100px",
},
],
};
},
};
You can format timenode label by using divider-label
attribute.
<TreeLikeTimeline :data="list" :divider-label="formatDividerLabel">
<template v-slot="{ item }">
<time>{{ item.time }}</time>
</template>
</TreeLikeTimeline>
export default {
methods: {
formatDividerLabel(timeValue) {
return new Date(timeValue).getFullYear();
},
},
};
You can custom theme color by using theme
attribute.
Also, change text color of timeline node by using text-color
.
<TreeLikeTimeline :data="list" theme="#738bff" text-color="#fffff">
<template v-slot="{ item }">
<time>{{ item.time }}</time>
</template>
</TreeLikeTimeline>
You can access the class .tree-like-timeline-vue2__node_item
to custom content style
HTML
<TreeLikeTimeline :data="list">
<template v-slot="{ item }">
<article>
<time>{{ item.time }}</time>
<h3>{{ item.title }}</h3>
<p>{{ item.content }}</p>
</article>
</template>
</TreeLikeTimeline>
CSS
/* Left side */
.tree-like-timeline-vue2__node_item:nth-of-type(even) {
article {
background: yellow;
border: 5px double red;
}
}
/* Right side */
.tree-like-timeline-vue2__node_item:nth-of-type(odd) {
article {
background: pink;
border: 3px dashed blue;
}
}