Bootstrap-vue-timeline NPM

bootstrap-vue-timeline

Introduction

A simple timeline component similar to Ant Timeline based on Bootstrap-Vue.

Screenshots

Dependencies

Installation

npm i bootstrap-vue-timeline

# if you use yarn:

yarn add bootstrap-vue-timeline

Usage

<script>
import Vue from 'vue';
import BootstrapVueTimeline from 'bootstrap-vue-timeline'
import { BCard } from 'bootstrap-vue'
Vue.component('b-card', BCard)
Vue.component('b-timeline', BootstrapVueTimeline)

// Uncomment the following to import BootstrapVue CSS files if you
// have not done so when registering BootstrapVue. Order is important.
// Check out: https://bootstrap-vue.org/docs#using-module-bundlers
// import 'bootstrap/dist/css/bootstrap.min.css'
// import 'bootstrap-vue/dist/bootstrap-vue.css'


export default Vue.extend({
  name: 'ServeDev',
  components: {
    BootstrapVueTimeline
  },
  data() {
    return {
      timelineItems: [
        {
          timestamp: Date.parse('2021-05-29T20:20:46.444Z'),
          title: 'Dolore ullamco exercitation commodo',
          content: 'Esse dolore consectetur aliqua laboris sunt aliqua do non.'
        },
        {
          timestamp: Date.parse('2021-05-28T20:20:46.444Z'),
          title: 'Voluptate pariatur dolore laborum eu'
        }
      ]
    }
  }
});
</script>

<template>
  <div id="app">
    <b-card
      title="Event Timeline"
    >
      <b-timeline
        :items="timelineItems"
        :reverse="false"
        date-format="dd/MM/yy HH:mm:ss"
        variant="primary"
        loading
      />
    </b-card>
  </div>
</template>

Features

Loading spinner
Support reverse props
Custom timestamp format
Support item head color variants
Support custom slots
Support custom icons
Refactor timeline and item into separate components
Emit events

Component Reference

Props

Name	Type	Description	Default
`items`	`Array`	A list of timeline items to display. Supported keys include: `timestamp`, `title`, `content`.
`reverse`	`Boolean`	The component displays a vertical timeline in the order of the `items` prop. If `reserve` is set to false, it displays items in reverse order. Default: false.
`loading`	`Boolean`	If true, display a loading spinner in the last item.
`date-format`	`String`	Controls the date format in the tooltip when you hover the human friendly time. Default: 'yyyy-MM-dd HH:mm:ss'
`variant`	`String`	Color variant. It supports Bootstrap color variants, including 'primary', 'success'. Default: 'primary'
`human-friendly-time`	`Boolean`	Displays human friendly time, e.g., '2 months ago'. If false, display the time as formatted according to the `dateFormat` param. Default: true	`true`