Marquee

A marquee is defined by an animation: a CSS @keyframes translation that loops forever. Mob exposes no animation primitive to a render function, which means no transform, no keyframes and no per-frame driver. A component cannot run its own timer either, because the timer would fire once per render. Driving the loop from the screen would re-render the whole tree on every frame, which is the wrong trade for decorative motion.

So Marquee renders its static form. The content sits in a horizontal scroller that you flick, with the repeated group the web version uses so that its loop shows no jump. It is the same content and it is readable. It moves under your finger instead of on its own.

The children are the content. Marquee repeats them repeat times, 2 by default, and puts a spacer of space between the repeats, 24 by default. The rail is a horizontal Scroll Area. An id registers that scroller so a screen can move it from a handler, the way the Scroller arrows do with MishkaScroller.nudge/3.

Marquee keeps no state and sends no events. See the Mob documentation for how screens render and handle messages.

Run this from your Mob app's root to add the component to lib/<app>/components/:

mix mishka.ui.gen.mob marquee

The generator registers the tag, so you can use it in ~MOB markup. Marquee builds on Scroll Area, so the generator also generates scroll_area without asking, because the dependency is a compile-time one. The examples on this page use the mishka_ prefix of the showcase app (--module-prefix mishka_), so the tag is <MishkaMarquee>. Without a prefix, the tag is <Marquee>.

This is the static form. The ticker is repeated three times in a horizontal rail, and you flick it sideways to move it.

Marquee rail of repeated content

LTR RTL

Preview

Show the whole example Show less

<MishkaMarquee repeat={3}>{[ticker()]}</MishkaMarquee>

ticker() is a helper in the showcase that returns a row of words and spacers: BEAM, OTP, Elixir, Mob and Chelekom, separated by bullets. Any node works as content. The showcase also sets height={32} on the rail.

• The animation is not ported. The rail scrolls under your finger.
• class, track_class and group_class are not ported.
• id registers the scroller instead of naming a DOM element.

• Headless Marquee, the web component this one ports.
• Mob Scroll Area, the scroller the rail is built on.
• Mob Scroller, a horizontal rail of items with previous and next controls.
• Mob Theme Icon, a themed container around one icon.
• Mob components, the full list of native components.