Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

vue-textra

Package Overview
Dependencies
0
Maintainers
1
Versions
6
Issues
File Explorer

Advanced tools

vue-textra

Vue js text sliding plugin

    1.3.0latest

Version published
Maintainers
1
Yearly downloads
7,085
increased by161.73%

Weekly downloads

Readme

Source

Textra Build Status

A Vue.js add-on to slide your text. demo

Installing

npm i -D vue-textra

Then inside your project, start using it:

import Vue from 'vue' import App from './App.vue' import Textra from 'vue-textra' Vue.use(Textra); new Vue({ el: '#app', render: h => h(App) })

To use inside browser:

<script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/textra.min.js'></script>

Then:

Vue.use(Textra);

Usage

Inside any of your components:

<textra :data='words' :timer="4" filter="flash" />

And in your instance data:

//... data () { return { words: ["My text to show", "Great news here!", "Vue is great", "Sample Text"] } } //...

Another example :

<textra :data='words' :timer="3.1" :infinite='true' filter="left-right" />

This one will loop around for ever.

Props

data

Type : Array Description : Should be array of things you want to slide.


timer

Type : Number Description : Defines gap between each slide as second. Default : 2


filter

Type : String Description : Defines type of filter you want to use when sliding. Default : simple


infinite

Type : Boolean Description : Defines whether your slider should keep looping or not. Default : false

Filters

There are 9 types of filters available for now:

  • simple
  • bottom-top
  • top-bottom
  • right-left
  • left-right
  • press
  • scale
  • flash
  • flip

Keywords

Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc