search

K-Sato1995 / svelte-vertical-timeline

Svelte components for creating a vertical timeline⏳⏳
https://svelte-vertical-timeline.vercel.app/
MIT License
96 stars 10 forks source link
svelte svelte-kit timeline

readme

svelte-vertical-timeline

image

Svelte components for creating a vertical timeline.

Check out the demo.

Demo

Installation

yarn add svelte-vertical-timeline

or

npm install svelte-vertical-timeline

Usage

A timeline consists of components below.

I listed some examples of timelines you can create with this library below.

Basic Timeline

A basic timeline showing list of events.

image

CODE

```svelte {#each options as option}

{option.title}

{/each} ```

Left positioned timeline

The main content of the timeline can be positioned on the left side.

image

CODE

```svelte {#each options as option}

{option.title}

{/each} ```

Alternating timeline

The timeline can display the events on alternating sides.

image

CODE

```svelte {#each options as option}

{option.title}

{/each} ```

Opposite content

The timeline can display content on opposite sides.

Please make sure to add slot="opposite-content" to the <TimelineOppositeContent/> component.

image

CODE

```svelte {#each options as option}

{option.time}

{option.title}

 {/each} ```

Customization

You can customize the timeline anyway you want. Check here for furthur information.

image

CODE

```svelte

09:30 am

Eat

You need to eat.

10:30 am

Sleep

You need to take a nap.

11:00 am

Code

Svelte is Awesome.

01:00 am

Snack

You need to treat yourself.

 ```

API

<Timeline/>

Props

Name type isRequired Description
position right, left or alternate x The position where the TimelineContent should appear
style string x Custom style for this component

<TimelineItem/>

Props

Name type isRequired Description
position right or left x The position where the timeline's item should appear
style string x Custom style for this component

<TimelineSeparator/>

Props

Name type isRequired Description
style string x Custom style for this component

<TimelineDot/>

Props

Name type isRequired Description
style string x Custom style for this component

<TimelineConnector/>

Props

Name type isRequired Description
style string x Custom style for this component

<TimelineContent/>

Props

Name type isRequired Description
style string x Custom style for this component

<TimelineOppositeContent/>

Props

Name type isRequired Description
style string x Custom style for this component