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: 5 days ago
JSON representation

A Text Swimlane plugin for Vue.js

• Host: GitHub
• URL: https://github.com/mubaidr/vue-swimlane
• Owner: mubaidr
• License: apache-2.0
• Created: 2017-05-24T03:51:06.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2021-08-03T19:24:20.000Z (over 3 years ago)
• Last Synced: 2024-05-01T13:21:12.199Z (7 months ago)
• Topics: swimlane, text, textslider, vue-components, vue-plugin, vuejs2
• Language: Vue
• Homepage: https://mubaidr.github.io/vue-swimlane
• Size: 3.86 MB
• Stars: 72
• Watchers: 2
• Forks: 7
• Open Issues: 35
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

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
💻 📖

  

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