Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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)