Ecosyste.ms: Awesome

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

https://github.com/mubaidr/vue-swimlane

A Text Swimlane plugin for Vue.js
https://github.com/mubaidr/vue-swimlane

swimlane text textslider vue-components vue-plugin vuejs2

Last synced: about 2 months ago
JSON representation

A Text Swimlane plugin for Vue.js

Lists

README 

        
# vue-swimlane

[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors)



A Text Swimlane plugin for Vue.js to display a list of words as an animated text Swimlane.



[![NPM](https://nodei.co/npm/vue-swimlane.png?compact=true)](https://npmjs.org/package/vue-swimlane)



## Demo



[Demo and Playground](https://mubaidr.github.io/vue-swimlane)



## How to use



### Install using npm



`npm install vue-swimlane --save`



#### Plug in your main.js or where required



```javascript

import Vue from 'vue'

import VueSwimlane from 'vue-swimlane'



Vue.use(VueSwimlane)

```



### use CDN



```html



```



### Markup



``



## Options



Following options can be passed as props.



- **words** - string[] - _required_: Array of tags or words to be used on display.

- **continous** - bool (Default: false): If true, list continues forward, repeating the list. (Bugged, animation not working)

- **circular** - bool (Default: false): If true, list starts from the top after completion.

- **pauseOnHover** - bool (Default: false): If true, animation will pause on mouse hover.

- **rows** - int (Default: 1): Number of rows always visible at a time.

- **scale** - float (Default: 1): Font size scaling relative to 16px.

- **transitionDuration** - float in ms (Default: 500): Animation duration for rows.

- **transitionDelay** - float in ms (Default: 250): Delays between each animation duration.

- **transition** - string (Default: ease-out): css transition name.



## Contributors ✨



Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):



  

    Jake
Jake
💻 📖

  



This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!