mirror of
https://github.com/noodlapp/noodl-docs.git
synced 2026-01-12 23:32:54 +01:00
53f0d6320e
Co-Authored-By: kotte <14197736+mrtamagotchi@users.noreply.github.com> Co-Authored-By: mikaeltellhed <2311083+mikaeltellhed@users.noreply.github.com> Co-Authored-By: Tore Knudsen <18231882+torekndsn@users.noreply.github.com> Co-Authored-By: Michael Cartner <32543275+michaelcartner@users.noreply.github.com>
48 lines
1.4 KiB
Markdown
48 lines
1.4 KiB
Markdown
---
|
|
title: Marquee Module
|
|
hide_title: true
|
|
---
|
|
|
|
# Marquee
|
|
|
|
[](https://github.com/noodlapp/modules/tree/main/modules/marquee)
|
|
|
|
This module allows you to add a marquee to your Noodl App using any of the other visual nodes.
|
|
|
|
<div className="ndl-image-with-background l">
|
|
|
|
|
|
|
|
</div>
|
|
|
|
:::tip
|
|
|
|
When developing components for the Marquee node, it is advisable to work on the component outside the Marquee node.
|
|
This is because the Marquee node duplicates HTML elements and ceases to listen for hot-reload when the component is modified.
|
|
To ensure consistent results, it is recommended to reload the page and observe the current appearance.
|
|
|
|
:::
|
|
|
|
### Getting started
|
|
|
|
After importing this module you will see one new nodes in the node picker called "Marquee" in the external libraries category.
|
|
|
|
We can start by placing the Marquee node into our visual tree.
|
|
All the children placed in this node will be added into the marquee list and duplicated to fill the space.
|
|
|
|
For example when we add a Text node inside like this:
|
|
|
|
<div className="ndl-image-with-background">
|
|
|
|
|
|
|
|
</div>
|
|
|
|
Then in the preview we will see this:
|
|
|
|
<div className="ndl-image-with-background">
|
|
|
|
|
|
|
|
</div>
|