Quick Apps

# marquee

Marquee effect for scrolling text.

Marquee on a Quick App

(Example code)

# Children Elements

This element doesn't support any element as child node.

# Attributes

In addition to the common attributes, this element may contain the following attributes.

# scrollamount

This attribute indicates the length of scrolling at each interval (in pixels).

  • Type: number
  • Default value: 6
  • Mandatory: no

# loop

This attribute indicates the number of times the marquee will scroll.

  • Type: number
  • Default value: -1 (infinite)
  • Mandatory: no

# direction

This attribute sets the text scrolling direction.

  • Type: string (left | right)
  • Default value: left
  • Mandatory: no

WARNING

  • The value ltr of the dir attribute does not take effect in this element when the script writing direction is right-to-left (e.g., in Arabic).

# CSS Properties

In addition to the common styles, this element supports the following styling properties:

# color

Color of the font.

  • Type: <color>
  • Default value: #de000000
  • Mandatory: no

# font-size

Font size.

  • Type: <length>
  • Default value: 37.5px
  • Mandatory: no

# font-weight

Weight of the font.

  • Type: string (lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | normal | bold | bolder)
  • Default value: normal
  • Mandatory: no

# font-family

Font family of for the text.

  • Type: string
  • Default value: -
  • Mandatory: no

To customize fonts, please refer font-face style.

# Events

In addition to the common events, this element supports the following events:

# bounce

This event is triggered when the marquee text reaches the boundary.

# finish

This event is triggered when the number of loops is reached.

# start

This event is triggered when the marquee text starts to scroll.

# Methods

This element has the following methods:

# start()

This method starts the marquee animation.

# stop()

This method stops the marquee animation.

# Example

<template>
  <div class="container">
    <div class="case-title mt-item">
      <text class="title">marquee</text>
    </div>
    <div class="item-container marquee-container">
      <marquee class="marquee" id="marquee1">Quick App</marquee>
      <marquee class="marquee" direction="right" id="marquee2">Quick App</marquee>
    </div>
    <div class="mlr-container mt-btn row-center">
      <input type="button" value="start" class="btn-blue" onclick="start" />
    </div>
    <div class="mlr-container mt-btn row-center">
      <input type="button" value="stop" class="btn-blue" onclick="stop" />
    </div>
  </div>
</template>

<style lang="sass">
  .marquee-container {
    height: 400px;
  }
  .marquee {
    font-size: 26px;
  }
</style>

<script>
  module.exports = {
    start() {
      this.$element('marquee1').start();
      this.$element('marquee2').start();
    },
    stop() {
      this.$element('marquee1').stop();
      this.$element('marquee2').stop();
    }
  }
</script>

← transform property →