Skip to content

junjizhi/bootstrap-vue-timeline

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ced98ff · Jul 23, 2021

History

17 Commits
Jun 12, 2021
Jun 6, 2021
Jun 12, 2021
Jul 23, 2021
Jun 6, 2021
Jun 8, 2021
Jun 6, 2021
Jun 8, 2021
Jul 23, 2021
Jun 11, 2021
Jun 11, 2021
Jul 23, 2021
Jun 12, 2021

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.