durbok/noodl-docs
1
0
Fork 0
mirror of https://github.com/noodlapp/noodl-docs.git synced 2026-01-11 23:02:54 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source 
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>
This commit is contained in:
Eric Tuvesson
2023-09-05 12:08:55 +02:00
commit 53f0d6320e
2704 changed files with 76354 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
library/modules/marquee/README.md Normal file
View File

@@ -0,0 +1,47 @@
---
title: Marquee Module
hide_title: true
---
# Marquee
[![GitHub](https://img.shields.io/static/v1?style=plastic&logo=github&label=GitHub&message=Source%20Code)](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">
![](/library/modules/marquee/preview-marquee.png)
</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">
![](/library/modules/marquee/text-1.png)
</div>
Then in the preview we will see this:
<div className="ndl-image-with-background">
![](/library/modules/marquee/text-1-preview.png)
</div>

45
library/modules/marquee/nodes/v1/marquee.md Normal file
View File

@@ -0,0 +1,45 @@
---
title: Marquee
hide_title: true
---
<##head##>
# Marquee
This visual node adds a marquee container to the visual tree.
<div className="ndl-image-with-background l">
![](/library/modules/marquee/preview-marquee.png)
</div>
<##head##>
## Inputs
<div className="ndl-table-35-65">
| Data | Description |
| ---------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-data">Auto Fill</span> | Whether to automatically fill blank space in the marquee with copies of the children or not. |
| <span className="ndl-data">Speed</span> | The speed calculated as pixels/second. |
| <span className="ndl-data">Delay</span> | The duration to delay the animation after render, in seconds. |
| <span className="ndl-data">Loop</span> | The number of times the marquee should loop, 0 is equivalent to infinite. |
| <span className="ndl-data">Direction</span> | The direction the marquee is sliding. |
| <span className="ndl-data">Gradient Enabled</span> | Whether to show the gradient or not. |
| <span className="ndl-data">Gradient Color</span> | The color of the gradient. |
| <span className="ndl-data">Gradient Width</span> | The width of the gradient on either side in pixels. |
| Signal | Description |
| ---------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <span className="ndl-signal">Pause</span> | Pause the marquee animation. |
| <span className="ndl-signal">Play</span> | Play the marquee animation. |
| <span className="ndl-signal">Toggle</span> | Toggle the marquee animation state. |
</div>
## Outputs
This node have no unique outputs.

9
library/modules/marquee/release-notes.md Normal file
View File

@@ -0,0 +1,9 @@
---
title: Release Notes
hide_title: true
---
# Release Notes
Version 1.0.0 [2023-06-13]
* Add Marquee node