https://github.com/luyilin/vue-cute-timeline

A cute timeline component for Vue.js.
https://github.com/luyilin/vue-cute-timeline

timeline timeline-component vue vue-component

Last synced: 4 days ago
JSON representation

A cute timeline component for Vue.js.

• Host: GitHub
• URL: https://github.com/luyilin/vue-cute-timeline
• Owner: luyilin
• License: mit
• Created: 2017-12-17T15:08:00.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2021-10-04T07:37:52.000Z (about 3 years ago)
• Last Synced: 2024-10-01T18:09:50.172Z (about 1 month ago)
• Topics: timeline, timeline-component, vue, vue-component
• Language: Vue
• Homepage: https://vue-cute-timeline.netlify.com/
• Size: 806 KB
• Stars: 321
• Watchers: 7
• Forks: 48
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-starred - luyilin/vue-cute-timeline - A cute timeline component for Vue.js. (vue)

README

        
# vue-cute-timeline

[![NPM version](https://img.shields.io/npm/v/vue-cute-timeline.svg?style=flat)](https://npmjs.com/package/vue-cute-timeline) [![NPM downloads](https://img.shields.io/npm/dm/vue-cute-timeline.svg?style=flat)](https://npmjs.com/package/vue-cute-timeline) [![CircleCI](https://circleci.com/gh/luyilin/vue-cute-timeline/tree/master.svg?style=shield)](https://circleci.com/gh/luyilin/vue-cute-timeline/tree/master)

[DEMO](https://vue-cute-timeline.netlify.com/)

## Introduction

A cute timeline component for Vue.js.

## Install

```bash

yarn add vue-cute-timeline --save

```

## Usage

```vue

  

    title

    item1

    item2

  

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

import 'vue-cute-timeline/dist/index.css'

export default {

  components: {

    Timeline,

    TimelineItem,

    TimelineTitle

  }

}

```

## API

### `` props

It will be better to use hyphenated attributes instead of camelcase attributes. [The discussion](https://stackoverflow.com/questions/1696864/naming-class-and-id-html-attributes-dashes-vs-underlines) explained why. 

- `timeline-theme`

  The theme color of the timeline component.

  Set the line's and circle's color.

  ```

  Type: string

  Default: #dbdde0

  ```

- `timeline-bg`

  The background color of the timeline circle component (for hollow and others if needed).

  Set the hollow circle's and other timeline symbol's default background color.

  ```

  Type: string

  Default: #dbdde0

  ```

### `` / `` props

- `bg-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.

  _Note** When `hollow` cannot be used together with `bg-color`, unless you wish to change the hollow background color.

  ```

  Type: boolean

  Default: false

  ```

- `font-color`

  Set the timeline item or title font color.

  Or you can set font color by add a className, as the content of the timeline item/title is a slot.

  ```

  Type: string

  Default: #37414a

  ```

- `icon-size`

  Set the timeline item or title icon size.

  Control the size of the circle or of the image set using `slots="others"`.

  ```

  Type: string ('small'| 'medium'|'large')

  Default: ''

  ```

### Slots

- `others`

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

  ```html

  

    

  

  ```

## License

MIT © [luyilin](https://github.com/luyilin)

> [minemine.cc](https://minemine.cc) · GitHub [@luyilin](https://github.com/luyilin) · Twitter [@luyilin12](https://twitter.com/luyilin12)