Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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.

Awesome Lists containing this project

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)