Vue 时间轴(Timeline)
made with Vuejs

Vue 时间轴(Timeline)是一个基于vue.js的漂亮易用的时间轴组件，用于构建精美的响应时间线。

安装

Npm

npm i @growthbunker/vuetimeline

Yarn

yarn add @growthbunker/vuetimeline

浏览器

<script src="https://cdn.jsdelivr.net/npm/vue@2.5/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@growthbunker/vuetimeline@latest/dist/vuetimeline.min.js"></script>

使用

引入

import Vue from "vue"
import vuetimeline from "@growthbunker/vuetimeline"

Vue.use(vuetimeline)

简单使用

<template>
  <!-- Latest update -->
  <vue-timeline-update
    :date="new Date('2017-02-26')"
    title="v2.2.0 - Initial D"
    description="Today I am thrilled to announce the release of Vue.js 2.2.0."
    thumbnail="/images/vuetimeline/initial_d.jpg"
    category="announcement"
    icon="code"
    color="red"
  />

  <!-- Another update -->
  <vue-timeline-update
    :date="new Date('2016-11-22')"
    title="v2.1.0 - Hunter X Hunter"
    description="Today I am thrilled to announce the release of Vue.js 2.1.0."
    thumbnail="/images/vuetimeline/hunter_x_hunter.jpg"
    category="announcement"
    icon="code"
    color="turquoise"
  />

  <!-- Yet another update -->
  <vue-timeline-update
    :date="new Date('2016-09-30')"
    title="v2.0.0 - Ghost in the Shell"
    description="Today I am thrilled to announce the release of Vue.js 2.0.0"
    thumbnail="/images/vuetimeline/ghost_in_the_shell.jpg"
    category="announcement"
    icon="code"
    color="white"
    is-last
  />
</template>

示例