Package Exports

vue-roller

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-roller) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Animated logo

vue-roller

Fluid and smooth rolling animation for Vue.js

Demo

Animated Demo

Try out here with your own text!

Getting Started

npm

npm i vue-roller

Vue

import Roller from "vue-roller";

export default {
    components:{
        Roller
    }
}
...

Vue-typescript

import Roller from "vue-roller";

@Component({
    components: { Roller }
})
...

Options

text (Required)

<Roller text="1234"></Roller>

Displays text.

transition

<Roller transition="1"></Roller>

Sets the time for the animation to complete in second(s). 0.5 by default.

isNumberFormat

<Roller isNumberFormat="true"></Roller>

Can be set to true if you want to display commas as thousands separators. false by default.

isStatic

<Roller isStatic="true"></Roller>

default : false (FIXME)

charList

<Roller :charList="['a', 'b', 'c']"></Roller>

Sets the list of characters used for the animation.

Default: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]

defaultChar

<Roller defaultChar="0"></Roller>

Sets the text to display when the page is first loaded (before the animation actually starts). "" by default.

Style

<Roller class="roller"></Roller>

<style>
    .roller .block {
        font-family: ~~~;
        margin: 20px;
    }
</style>