Timelines

Components

Timelines are composed of 4 components:

• vuestic-horizontal-timeline-item
• vuestic-horizontal-timeline
• vuestic-vertical-timeline-item
• vuestic-vertical-timeline

Let's break them apart:

vuestic-horizontal-timeline-item

<vuestic-horizontal-timeline-item
        :step="step"
        :date="step.date"
        :type="type"
      >
        <vuestic-card >
          <template slot="title">{{step.date}}</template>
          {{step.content}}
        </vuestic-card>
      </vuestic-horizontal-timeline-item>

Slot provides possibility to switch vuestic-card for something else.

vuestic-horizontal-timeline

<vuestic-horizontal-timeline
          :steps="horizontalCardsItems"
          :type="'card'"
        />

This component provides 2 modes:

• simple

• card

• currentStep - Number - your current step on timeline. Default - 0.

• theme - String card mode provides possibility to choose card theme. Default - 'base'.

vuestic-vertical-timeline-item

<vuestic-vertical-timeline-item
        :step="step"
        :date="step.date"
        :type="type"
      >
        <vuestic-card
          :theme="theme"
       >
          <template slot="title">{{step.date}}</template>
          {{step.content}}
        </vuestic-card>
      </vuestic-vertical-timeline-item>

There are 3 modes:

• label
• simple
• centered

vuestic-vertical-timeline

<vuestic-vertical-timeline
          :steps="simpleVerticalitems"
          :theme="'dark'"
        />

This component provides 2 modes:

• simple

• centered

• currentStep - Number - your current step on timeline. Default - 0.

• theme - String simple mode provides possibility to choose card theme. Default - 'base'.