Vue JavaScript
Switch branches/tags
Latest commit 3624319 Feb 21, 2018
Permalink
Failed to load latest commit information.
example add babel preset Feb 21, 2018
src use eslint Feb 12, 2018
.babelrc add babel preset Feb 21, 2018
.editorconfig init Dec 17, 2017
.gitignore use gh-pages to deploy a demo Feb 17, 2018
LICENSE init Dec 17, 2017
README.md add babel preset Feb 21, 2018
bili.config.js not extract css Jan 24, 2018
circle.yml add circle Jan 21, 2018
package.json add babel preset Feb 21, 2018
yarn.lock use eslint Feb 12, 2018

README.md

vue-cute-timeline

NPM version NPM downloads CircleCI

DEMO

Introduction

A cute timeline component for Vue.js.

Install

yarn add vue-cute-timeline --save

Usage

<template>
  <timeline>
    <timeline-title>title</timeline-title>
    <timeline-item color="#9dd8e0">item1</timeline-item>
    <timeline-item :hollow="true">item2</timeline-item>
  </timeline>
</template>

<script>
import { Timeline, TimelineItem, TimelineTitle } from 'vue-cute-timeline'

export default {
  components: {
    Timeline,
    TimelineItem,
    TimelineTitle
  }
}
</script>

API

Timeline props

It will be better to use hyphenated attributes instead of camelcase attributes. The discussion explained why.

timeline-theme

Type: string
Default: #dbdde0

The theme color of the timeline component.

Set the line's and circle's color to custom colors.

TimelineItem / TimelineTitle props

color

Type: string
Default: #dbdde0

Set the circle's and the circle's border color to custom colors.

line-color

Type: string
Default: #dbdde0

Only set the circle's border color to custom colors.

hollow

Type: boolean
Default: false

Control the circle is hollow or not.

slot

Don't like circle? Now You can set it to image、iconfont or anything you want.

e.g.

<timeline-item>
  <img src="https://user-images.githubusercontent.com/12069729/36057805-80cfc3d2-0e4e-11e8-8851-6fda091ff389.png"
   class="icon-heart" slot="others">
</timeline-item>

License

MIT © luyilin

minemine.cc · GitHub @luyilin · Twitter @luyilin12