Skip to content

junjizhi/bootstrap-vue-timeline

Repository files navigation

bootstrap-vue-timeline

Introduction

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

Demo

Codesandbox

Screenshots

image

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.