Press UI

# RollingText

Rolling text animation, which can roll numbers and other types of text.

# Usage

# Basic Usage

You can set the starting value with start-num and the target value with target-num. The RollingText component will automatically start the animation, rolling from the starting value to the target value.

<press-rolling-text :start-num="0" :target-num="123" />

# Set Rolling Direction

You can set the rolling direction of the numbers using the direction prop. By default, it rolls downwards, but you can set it to up to roll upwards.

<press-rolling-text :start-num="0" :target-num="432" direction="up" />

# Set Stop Order

You can set the order of stopping the animation of each digit through the stop-order prop. By default, it stops from the higher digits. Setting rtl can stop from the ones digit.

<press-rolling-text :start-num="0" :target-num="54321" stop-order="rtl" />

# Roll Non-numeric Text

You can reverse non-numeric content by using the text-list prop. The component will rolling from the first item to the last item in the array. Please make sure that the array length is greater than or equal to 2, and that each item has the same length.

<press-rolling-text :text-list="textList" :duration="1" />

import { ref } from 'vue';

export default {
  setup() {
    const textList = ref([
      'aaaaa',
      'bbbbb',
      'ccccc',
      'ddddd',
      'eeeee',
      'fffff',
      'ggggg',
    ]);
    return { textList };
  },
};

# Custom Style

The RollingText component provides some CSS variables that you can override to customize the style, or you can directly modify the component's style. Additionally, you can set the height of the numbers using the height prop.

<press-rolling-text
  class="my-rolling-text"
  :height="54"
  :start-num="12345"
  :target-num="54321"
/>

.my-rolling-text {
  --press-rolling-text-background: #07c160;
  --press-rolling-text-color: white;
  --press-rolling-text-font-size: 24px;
  --press-rolling-text-gap: 6px;
  --press-rolling-text-item-border-radius: 5px;
  --press-rolling-text-item-width: 40px;
}

# Manual Control

After obtaining the component instance through ref, you can call the start and reset methods. The start method is used to start the animation, and the reset method is used to reset the animation.

<press-rolling-text
  ref="rollingTextRef"
  :start-num="0"
  :target-num="54321"
  :auto-start="false"
/>
<press-grid clickable :column-num="3">
  <press-grid-item icon="play-circle-o" :text="start" @click="start" />
  <press-grid-item icon="replay" :text="reset" @click="reset" />
</press-grid>

import { ref } from 'vue';

export default {
  setup() {
    const rollingTextRef = ref(null);
    const start = () => {
      rollingTextRef.value.start();
    };
    const reset = () => {
      rollingTextRef.value.reset();
    };
    return { rollingTextRef, start, reset };
  },
};

# API

# Props

Attribute Description Type Default
start-num Start number number 0
target-num Target number number -
text-list Text array string[] []
duration Duration of the animation, in seconds number 2
direction Rolling direction of the text, with down and up as the values string down
auto-start Whether to start the animation boolean true
stop-order Order of stopping the animation of each digit, with ltr and rtl as the values string ltr
height Height of digit, px as unit number 40

# Methods

Use ref (opens new window) to get RollingText instance and call instance methods.

Name Description Attribute Return value
start Start the animation - -
reset Reset the animation - -

# Theming

# CSS Variables

The component provides the following CSS variables, which can be used to customize styles.

Name Default Value Description
--press-rolling-text-background inherit Background color of a single digit
--press-rolling-text-color var(--press-text-color) Color of the number
--press-rolling-text-font-size var(--press-font-size-md) Font size of the number
--press-rolling-text-gap 0px Spacing between digits
--press-rolling-text-item-width 15px Width of a single digit
--press-rolling-text-item-border-radius 0px Border radius of a single digit
横屏

← Skeleton →