Vue JavaScript
Switch branches/tags
Clone or download
Latest commit cc704ac Feb 23, 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 Fix some typo and semantics Feb 22, 2018
bili.config.js not extract css Jan 24, 2018
circle.yml add circle Jan 21, 2018
package.json v1.2.4 Feb 23, 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

    The theme color of the timeline component.

    Set the line's and circle's color.

    Type: string
    Default: #dbdde0
    

<timeline-item> / <timeline-title> props

  • color

    Set the circle's and the circle's border color.

    Type: string
    Default: #dbdde0
    
  • line-color

    Set only the circle's border color.

    Type: string
    Default: #dbdde0
    
  • hollow

    Control whether the circle is hollow or not.

    Type: boolean
    Default: false
    

Slots

  • others

    Don't like the circle? You can set it to a image, iconfont or anything you want.

    <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