https://github.com/horberlan/v-timeline-component
Customizable timeline component for Vue.js
https://github.com/horberlan/v-timeline-component
timeline-component vue3-typescript vuejs
Last synced: 9 months ago
JSON representation
Customizable timeline component for Vue.js
- Host: GitHub
- URL: https://github.com/horberlan/v-timeline-component
- Owner: horberlan
- License: mit
- Created: 2024-10-28T20:12:22.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-16T21:31:58.000Z (over 1 year ago)
- Last Synced: 2025-04-12T22:53:58.271Z (about 1 year ago)
- Topics: timeline-component, vue3-typescript, vuejs
- Language: Vue
- Homepage: https://www.npmjs.com/package/v-timeline-component
- Size: 171 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# v-timeline-component
### Customizable Timeline Component for Vue
The `v-timeline-component` is a Vue.js component that utilizes slots to display events in a timeline format. It supports both vertical and horizontal layouts, allowing for customization of event presentation, styling, and content. You can also view it at [showcase](https://horberlan.netlify.app/projects/v-timeline-component).
## Features
- **Layout Customization**: Choose between vertical and horizontal layouts to suit your application's needs.
- **Event Customization**: Provide your own events with title, date, and description.
- **Custom Content Support**: Utilize slots to insert custom content for each event.
- **Styling Customization**: Adjust the color, marker size, and line width to match your desired aesthetic.
## Installation
To use the `v-timeline-component`, install it via npm:
```bash
npm install v-timeline-component
```
### Basic Example (Vertical Layout)
```vue
{{ event.title }}
{{ event.description }}
{{ event.date }}
interface TimelineEvent {
title: string;
date: string;
description: string;
child?: TimelineEvent[];
}
const timelineEvents: Ref<TimelineEvent[]> = ref([
{
title: "Event 1 Title",
date: "2023-02-15",
description: "Description for the first event. This can be any text.",
child: [
{
title: "child Lorem ipsum dolor sit amet 1",
date: "2023-02-16",
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor, vestibulum magna sed, convallis ex.",
},
{
title: "child Lorem ipsum dolor sit amet 2",
date: "2023-02-17",
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor, vestibulum magna sed, convallis ex.",
},
],
},
{
title: "Event 2 Title",
date: "2023-03-01",
description: "This is the second event on our timeline.",
},
{
title: "Event 3 Title",
date: "2023-04-20",
description:
"Aperiam animi ut. Odit ullam eaque. Iusto laboriosam non nulla nisi soluta nobis est dolor ea",
},
]);
```
### Example (Horizontal Layout)
```vue
{{ event.title }}
{{ event.description }}
{{ event.date }}
{{ event.title }}
{{ event.description }}
{{ event.date }}
```
## Available Props
| **Property** | **Type** | **Default** | **Description** |
| :------------- | :-------------- | :----------- | :-------------------------------------------- |
| **color** | `String` | `#ddd` | Timeline line and marker color. |
| **markerSize** | `String` | `0.75rem` | Size of event markers. |
| **lineWidth** | `String` | `2px` | Width of the timeline line. |
| **layout** | `String` | `vertical` | Timeline layout (`vertical` or `horizontal`). |
| **events** | `Array` | **Required** | Array of event objects. |
## Slots
### Default Slot
The default slot allows for custom content within each event on the timeline. It provides the `event` and `index` of the event.
```vue
```
### Marker Slot
The `#marker` slot allows for custom markers for each timeline event. Use it to customize the appearance of markers with custom elements or emojis.
```vue
💜
```
Or dynamically with event data:
```vue
{{ event.marker }}
```
👉 [example](src/App.vue)
## Contributing
If you would like to contribute to this project, feel free to fork the repository and submit a pull request. Contributions are welcome!