Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hosein2398/textra
Vue js add-on to slide text.
https://github.com/hosein2398/textra
animating animating-text text-slider vue vue-plugin
Last synced: 3 days ago
JSON representation
Vue js add-on to slide text.
- Host: GitHub
- URL: https://github.com/hosein2398/textra
- Owner: hosein2398
- License: mit
- Created: 2018-01-28T07:31:22.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-07T12:35:29.000Z (almost 2 years ago)
- Last Synced: 2024-04-24T20:28:31.272Z (7 months ago)
- Topics: animating, animating-text, text-slider, vue, vue-plugin
- Language: Vue
- Homepage: https://hosein2398.github.io/textra
- Size: 938 KB
- Stars: 31
- Watchers: 3
- Forks: 11
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Textra [](https://travis-ci.org/hosein2398/Textra)
> A Vue.js add-on to slide your text. [demo](https://hosein2398.github.io/textra/)
## Installing
```
npm i -D vue-textra
```
Then inside your project, start using it:
```js
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:
```html
```
Then:
```js
Vue.use(Textra);
```
## Usage
Inside any of your components:
```html
```
And in your instance data:
```js
//...
data () {
return {
words: ["My text to show", "Great news here!", "Vue is great", "Sample Text"]
}
}
//...
```
Another example :
```html
```
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`