vue-cute-timeline

A cute timeline component for Vue.js

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
vue-cute-timeline
32161.2.103 years ago6 years agoMinified + gzip package size for vue-cute-timeline in KB

Readme

vue-cute-timeline
NPM version NPM downloads CircleCI DEMO

Introduction

A cute timeline component for Vue.js.

Install

```bash yarn add vue-cute-timeline --save ```

Usage

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

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

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

License

MIT © luyilin
minemine.cc · GitHub @luyilin · Twitter @luyilin12