Components

  • vuestic-timeline-item - timeline item
  • vuestic-timeline - timeline wrapper
    Here's the general example:
  1. <vuestic-timeline vertical centered>
  2. <vuestic-timeline-item active>
  3. <template slot="before">
  4. [date]
  5. </template>
  6. <template slot="after">
  7. [some text]
  8. </template>
  9. </vuestic-timeline-item>
  10. </vuestic-timeline>

vuestic-timeline

  1. <vuestic-timeline vertical centered>
  2. <!-- vuestic-timeline-items here -->
  3. </vuestic-timeline>

Props:

  • vertical - Boolean. Default - false.
  • centered - String. Default - false.

vuestic-timeline-item

  1. <vuestic-timeline-item active>
  2. <template slot="before">
  3. <div class="vuestic-timeline-item__title">Styled title</div>
  4. <div class="vuestic-timeline-item__description">Styled description</div>
  5. </template>
  6. <template slot="after">
  7. <div class="vuestic-timeline-item__text">Text aligned symmetrically</div>
  8. </template>
  9. </vuestic-timeline-item>

Props:

  • active - Boolean. Default - false.