bootstrap-vue-timeline

Introduction

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

Demo

Codesandbox

Screenshots

Dependencies

• Vue.js 2.6+
• Bootstrap-Vue (v2.21.2+)
• Other Bootstrap-Vue 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

Slots

N/A

Events

N/A

Development

Install dependencies:

yarn install --dev

Build component:

yarn build

Run example app locally:

yarn serve

Lints and fixes files:

yarn lint

Generate component documentation:

yarn doc src/bootstrap-vue-timeline.vue

License

Released under the MIT License. Copyright (c) Bootstrap-vue-timeline.