vue-swimlane
vue-swimlane
A Text Swimlane plugin for Vue.js to display a list of words as an animated text Swimlane.
Demo
How to use
Install using npm
npm install vue-swimlane --save
Plug in your main.js or where required
import Vue from 'vue'
import VueSwimlane from 'vue-swimlane'
Vue.use(VueSwimlane)
use CDN
<script src="https://unpkg.com/vue-swimlane/dist/vue-swimlane.min.js"></script>
Markup
<vue-swimlane :words="['Some', 'Keywords', 'Array']"></vue-swimlane>
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):
Jake 💻 📖 |
This project follows the all-contributors specification. Contributions of any kind welcome!
Dependencies
@babel/core: ^7.4.5@babel/preset-env: 7.4.5eslint: ^6.0.0eslint-config-airbnb: ^17.1.0eslint-config-prettier: ^5.0.0eslint-friendly-formatter: ^4.0.1eslint-plugin-html: ^5.0.5eslint-plugin-import: ^2.17.3eslint-plugin-jsx-a11y: ^6.2.1eslint-plugin-react: ^7.13.0eslint-plugin-vue: ^5.2.2rollup: ^1.16.2rollup-plugin-babel: ^4.3.3rollup-plugin-commonjs: ^10.0.0rollup-plugin-node-resolve: ^5.0.4rollup-plugin-terser: ^5.0.0rollup-plugin-vue: ^5.0.0vue-template-compiler: ^2.6.10