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

Chore/cleanup before open source (#55)

Browse Source 
* Chore: Cleanup

* Updated some urls to images and removed parts of documentation that is no longer valid

* Removal of some documentation that is no longer valid

* Removed PDF Export module

---------

Co-authored-by: Johan Olsson <johan@noodl.net>
This commit is contained in:
kotte
2024-01-15 10:28:53 +01:00
committed by GitHub
parent 656e5fc8d2
commit 05a7b2b290
36 changed files with 144 additions and 511 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/guides/user-interfaces/figma-plugin.md
View File

@@ -50,11 +50,11 @@ Here's the same node duplicated in Noodl, with a different source and border rad
All text styles used by exported text layers will automatically be imported.
?> Figma uses the fonts you have installed on your system. In Noodl apps the required font files have to be defined in your projects. You can [import fonts via Google Fonts](https://www.youtube.com/watch?v=lgMZZC6XoAs) or [via font files](https://www.youtube.com/watch?v=P76v0Q38eKI)
Figma uses the fonts you have installed on your system. In Noodl apps the required font files have to be defined in your projects. You can [import fonts via Google Fonts](https://www.youtube.com/watch?v=lgMZZC6XoAs) or [via font files](https://www.youtube.com/watch?v=P76v0Q38eKI)
<iframe width="560" height="315" style={{margin:'0 auto',display:'block'}} src="https://www.youtube-nocookie.com/embed/sZm0eBZvLaM" title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe><br/>
?> Note that the text styles was added to the styles tab in Noodl ![](/docs/guides/user-interfaces/figma-plugin/text-styles.png ':class=img-size-l')
Note that the text styles was added to the styles tab in Noodl ![](/docs/guides/user-interfaces/figma-plugin/text-styles.png ':class=img-size-l')
## Export complex shapes

14
docs/guides/user-interfaces/layout.mdx
View File

@@ -32,7 +32,7 @@ The **Group** node is the most central node for doing a layout. It's the fundame
**Group** nodes are arranged in a hierarchy and can have other nodes as children. It controls the layout of its children and there are a number of properties that can be used to specify how the children of a **Group** node will be laid out. You can copy the various node examples used in this guide by clicking "Copy nodes" and then pasting into a Noodl project.
<div className="ndl-image-with-background xl">
<img src="/2.8/docs/guides/user-interfaces/layout/groups.png" />
<img src={useBaseUrl("/docs/guides/user-interfaces/layout/groups.png")} />
<CopyToClipboardButton
json={{
nodes: [
@@ -113,7 +113,7 @@ Here's an example you can copy into Noodl. Click the "Copy nodes" button next to
Change the **Layout** of the top level node to see how the direction of the child nodes change.
<div className="ndl-image-with-background xl">
<img src="/2.8/docs/guides/user-interfaces/layout/layout-dir.png"></img>
<img src={useBaseUrl("/docs/guides/user-interfaces/layout/layout-dir.png")}></img>
<CopyToClipboardButton
json={{
nodes: [
@@ -223,11 +223,11 @@ You can copy the nodes below to an empty component in Noodl. The result is shown
<div className="ndl-image-with-background">
<img
src="/2.8/docs/guides/user-interfaces/layout/content-size-nodes.png"
src={useBaseUrl("docs/guides/user-interfaces/layout/content-size-nodes.png")}
className="ndl-image small"
></img>
<img
src="/2.8/docs/guides/user-interfaces/layout/content-size-example.png"
src={useBaseUrl("/docs/guides/user-interfaces/layout/content-size-example.png")}
className="ndl-image small"
></img>
<CopyToClipboardButton
@@ -368,7 +368,7 @@ You can use the alignment controls to pin the children to a specific edge, or ho
A Group can control the alignment of its children using the _Align and justify content_ property.
<div className="ndl-image-with-background l">
<img src="/2.8/docs/guides/user-interfaces/layout/alignment.gif"></img>
<img src={useBaseUrl("/docs/guides/user-interfaces/layout/alignment.gif")}></img>
<CopyToClipboardButton
json={{
nodes: [
@@ -418,7 +418,7 @@ Children can use the _alignment_ controls to override the parent's alignment set
Children can use margins to offset the position from how it's aligned.
<div className="ndl-image-with-background l">
<img src="/2.8/docs/guides/user-interfaces/layout/align.gif"></img>
<img src={useBaseUrl("/docs/guides/user-interfaces/layout/align.gif")}></img>
<CopyToClipboardButton
json={{
nodes: [
@@ -490,7 +490,7 @@ You can choose any of these options:
Here's an example of a horizontal layout with **Multi Line Wrap** set to `On`.
<div className="ndl-image-with-background l">
<img src="/2.8/docs/guides/user-interfaces/layout/multi-line.gif"></img>
<img src={useBaseUrl("/docs/guides/user-interfaces/layout/multi-line.gif")}></img>
<CopyToClipboardButton
json={{
nodes: [

2
docs/guides/user-interfaces/responsive-design.mdx
View File

@@ -1108,6 +1108,6 @@ It features the following options in the property panel:
## Get building!
Now you know all of the techniques we use when building responsive designs. However, Noodl is flexible, and we always learn new things from the community. If you have any tips and tricks that you use, but that we havent touched upon here and feel like sharing it, feel free to hop on in to on our [Discord server](https://discord.com/invite/23xU2hYrSJ). We are always happy to hear your ideas and feedback.
Now you know all of the techniques we use when building responsive designs. However, Noodl is flexible, and we always learn new things from the community. If you have any tips and tricks that you use, but that havent been touched upon here and feel like sharing it, feel free to hop on in on the [Discord server](https://discord.com/invite/23xU2hYrSJ). The community is always happy to hear your ideas and feedback.
Happy Noodling!

34
docs/guides/user-interfaces/states.mdx
View File

@@ -24,7 +24,7 @@ First let's start with the basic visual nodes that make up the switch. This is s
<div className="ndl-image-with-background xl">
<img
src="/2.8/docs/guides/user-interfaces/states/switch-nodes.png"
src={useBaseUrl("/docs/guides/user-interfaces/states/switch-nodes.png")}
className="ndl-image med"
></img>
<CopyToClipboardButton
@@ -82,11 +82,11 @@ Below you can see the styling of the two nodes. The first image shows the Circle
<div className="ndl-image-with-background l">
<img
src="/2.8/docs/guides/user-interfaces/states/style-props1.png"
src={useBaseUrl("/docs/guides/user-interfaces/states/style-props1.png")}
className="ndl-image small"
></img>
<img
src="/2.8/docs/guides/user-interfaces/states/style-props2.png"
src={useBaseUrl("/docs/guides/user-interfaces/states/style-props2.png")}
className="ndl-image small"
></img>
</div>
@@ -99,7 +99,7 @@ Next, create the two states.
<div className="ndl-image-with-background l">
<img
src="/2.8/docs/guides/user-interfaces/states/create-states.gif"
src={useBaseUrl("/docs/guides/user-interfaces/states/create-states.gif")}
className="ndl-image med"
></img>
</div>
@@ -110,7 +110,7 @@ We will also specify **Values** for each of our states. In the same way you adde
<div className="ndl-image-with-background">
<img
src="/2.8/docs/guides/user-interfaces/states/values-1.png"
src={useBaseUrl("/docs/guides/user-interfaces/states/values-1.png")}
className="ndl-image med"
></img>
</div>
@@ -119,11 +119,11 @@ Specify the value for each state. The X position should be **40** when the switc
<div className="ndl-image-with-background">
<img
src="/2.8/docs/guides/user-interfaces/states/on-values.png"
src={useBaseUrl("/docs/guides/user-interfaces/states/on-values.png")}
className="ndl-image med"
></img>
<img
src="/2.8/docs/guides/user-interfaces/states/off-values.png"
src={useBaseUrl("/docs/guides/user-interfaces/states/off-values.png")}
className="ndl-image med"
></img>
</div>
@@ -131,7 +131,7 @@ Specify the value for each state. The X position should be **40** when the switc
Connect the **Knob X** output of the **States** node to the **Pos X** input of the **Circle** node.
<div className="ndl-image-with-background xl">
<img src="/2.8/docs/guides/user-interfaces/states/knob-x-connected.png"></img>
<img src={useBaseUrl("/docs/guides/user-interfaces/states/knob-x-connected.png")}></img>
</div>
As you can see the **States** node will get an output corresponding to each value that is defined under **Values**. This output will transition to the specified values when the **States** node changes state. One way to see the different states and transitions is to play with the **State** dropdown menu in the properties panel.
@@ -146,7 +146,7 @@ You can connect the outputs of the **States** node to anything you like. In this
<div className="ndl-image-with-background">
<img
src="/2.8/docs/guides/user-interfaces/states/color-type.png"
src={useBaseUrl("/docs/guides/user-interfaces/states/color-type.png")}
className="ndl-image med"
></img>
</div>
@@ -154,7 +154,7 @@ You can connect the outputs of the **States** node to anything you like. In this
Finally, we can make the **States** node toggle state when the switch **Group** node is clicked. This is achieved by connecting the **Click** signal from the **Group** to the **Toggle** input of the **States** node. This will make the **States** node jump to the next state in the list and when the last one is reached it will jump to the first one again. In this case we only have two states, so it will toggle between **On** and **Off**.
<div className="ndl-image-with-background xl">
<img src="/2.8/docs/guides/user-interfaces/states/click-toggle.png"></img>
<img src={useBaseUrl("/docs/guides/user-interfaces/states/click-toggle.png")}></img>
<CopyToClipboardButton
json={{
nodes: [
@@ -249,7 +249,7 @@ For _number_ and _color_ types the **States** node will try to smoothly transiti
<div className="ndl-image-with-background xl">
<img
src="/2.8/docs/guides/user-interfaces/states/hover-fx-nodes.png"
src={useBaseUrl("/docs/guides/user-interfaces/states/hover-fx-nodes.png")}
className="ndl-image med"
></img>
<CopyToClipboardButton
@@ -335,7 +335,7 @@ This simple graph has a **States** node that controls the hover state of a **Gro
<div className="ndl-image-with-background">
<img
src="/2.8/docs/guides/user-interfaces/states/hover-fx1.gif"
src={useBaseUrl("/docs/guides/user-interfaces/states/hover-fx1.gif")}
className="ndl-image small"
></img>
</div>
@@ -344,7 +344,7 @@ Both transitions (color and size) have the default transition curves. You can ed
<div className="ndl-image-with-background">
<img
src="/2.8/docs/guides/user-interfaces/states/transition-props.png"
src={useBaseUrl("/docs/guides/user-interfaces/states/transition-props.png")}
className="ndl-image med"
></img>
</div>
@@ -355,7 +355,7 @@ In this case we want to change the curve for the **Size** transition. You can ed
<div className="ndl-image-with-background l">
<img
src="/2.8/docs/guides/user-interfaces/states/change-size-curve.gif"
src={useBaseUrl("/docs/guides/user-interfaces/states/change-size-curve.gif")}
className="ndl-image med"
></img>
</div>
@@ -369,7 +369,7 @@ You can play with different settings for the curves and see them working when yo
<div className="ndl-image-with-background">
<img
src="/2.8/docs/guides/user-interfaces/states/hover-fx2.gif"
src={useBaseUrl("/docs/guides/user-interfaces/states/hover-fx2.gif")}
className="ndl-image small"
></img>
</div>
@@ -379,7 +379,7 @@ You can play with different settings for the curves and see them working when yo
You can also connect several **States** nodes together to create more complex types of animations. In the node graph below we have a second **States** node that expands the **Group** node (changes the width). The second **States** node labeled **Expand** changes the width between the states **Yes** and **No**. The neat thing is that it is triggered when the first states node (the hover states) has reached the **Yes** state. It is returned to **No** when the mouse leaves (the hover end), just like the first node.
<div className="ndl-image-with-background xl">
<img src="/2.8/docs/guides/user-interfaces/states/chaining-states.png"></img>
<img src={useBaseUrl("/docs/guides/user-interfaces/states/chaining-states.png")}></img>
<CopyToClipboardButton
json={{
nodes: [
@@ -517,7 +517,7 @@ This will result in the behaviour shown below. As you can see the first **States
<div className="ndl-image-with-background">
<img
src="/2.8/docs/guides/user-interfaces/states/hover-fx3.gif"
src={useBaseUrl("/docs/guides/user-interfaces/states/hover-fx3.gif")}
className="ndl-image small"
></img>
</div>