durbok/noodl-docs
1
0
Fork 0
mirror of https://github.com/noodlapp/noodl-docs.git synced 2026-01-12 07:12:53 +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

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: [