durbok/noodl-docs
1
0
Fork 0
mirror of https://github.com/noodlapp/noodl-docs.git synced 2026-01-10 14:22:52 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: hierarchy typo (#37)

Browse Source
This commit is contained in:
Eric Tuvesson
2023-10-10 10:13:32 +02:00
committed by GitHub
parent 44d9533ecd
commit 6b3315b1dd
4 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
docs/guides/user-interfaces/basics.md
View File

@@ -25,14 +25,14 @@ To edit the properties of a UI element, you click the element in the visual canv
<video width="100%" autoPlay muted loop src={useBaseUrl("/docs/guides/user-interfaces/basics/edit-properties.mp4")}/>
</div>
## The visual heirarchy
As you add UI elements to your component you will see the visual heirarchy being built in the node graph editor. All UI elements are depicted as blue nodes. Here are some nifty things to know about the visual hierarchy in the node editor.
## The visual hierarchy
As you add UI elements to your component you will see the visual hierarchy being built in the node graph editor. All UI elements are depicted as blue nodes. Here are some nifty things to know about the visual hierarchy in the node editor.
- All components must have a **single root** UI Element, most ofthen this is a **Group** node.
- You can hover the UI elements in the node graph editor to reveal them in the visual canvas.
- You can manipulate the heirarchy much like you would a layer panel in other design tools.
- You can manipulate the hierarchy much like you would a layer panel in other design tools.
- You can bring up the **Node picker** by **right clicking** in the node graph editor. If you want the newly created UI element to be placed as a child to another UI element simply right click the parent element to bring up the **Node Picker**.
@@ -41,7 +41,7 @@ As you add UI elements to your component you will see the visual heirarchy being
</div>
## Grouping and Layouts
Now that you know how to place new components it's time to learn another important concept, grouping. This is how you group UI elements together and control the layout of the elements under a group. Use the **Node Picker** to create a new group, place it where you want it in the heirarchy, select, drag and drop the UI elements that you want under the group.
Now that you know how to place new components it's time to learn another important concept, grouping. This is how you group UI elements together and control the layout of the elements under a group. Use the **Node Picker** to create a new group, place it where you want it in the hierarchy, select, drag and drop the UI elements that you want under the group.
The **Group** node gives you a bunch of options for layouting user interfaces, learn more about the details of layouting and the group node in this [guide](/docs/guides/user-interfaces/layout)

2
javascript/reference/component/README.md
View File

@@ -25,7 +25,7 @@ Component.Object.Selection = Component.Object.Checkboxes.filter(
).map((o) => ({ Value: o.Value }));
```
`Component.ParentObject` is similair but this object is the [Parent Component Object](/nodes/component-utilities/parent-component-object), that is the **Component Object** of the parent component in the visual heirarchy. It is also used like any other [Noodl.Object](/javascript/reference/object).
`Component.ParentObject` is similair but this object is the [Parent Component Object](/nodes/component-utilities/parent-component-object), that is the **Component Object** of the parent component in the visual hierarchy. It is also used like any other [Noodl.Object](/javascript/reference/object).
`Component.RepeaterObject` If this component is the template of a repeater this will contain the object of the items array corresponding to this specific component instance. That is the same object as if you set an object **Id Source** to **From Repeater**, as shown below.

2
nodes/component-utilities/component-children/README.md
View File

@@ -10,7 +10,7 @@ title: Component Children node
Used to mark where children of instances of this component will be placed.
Any instance of a component that have a **Component Children** placed in its heirarchy will be
Any instance of a component that have a **Component Children** placed in its hierarchy will be
able to have children. These children will appear as though they were inserted at the location of
the **Component Children** node.

2
static/lessons/gettingstarted/lesson_old.html
View File

@@ -53,7 +53,7 @@ style="width:300px; height: 190px;">
]'>
<h3>Visual hierarchy</h3>
<p>Let's get down to business. You can move nodes by dragging them around with the <strong>left</strong> mouse button. You can drag a node in and out of the visual heirarchy as you please.</p>
<p>Let's get down to business. You can move nodes by dragging them around with the <strong>left</strong> mouse button. You can drag a node in and out of the visual hierarchy as you please.</p>
<h3>Drag the text from the root node</h3><i data-checkmark="0"></i>
<p>Try dragging the text node away from the hierarchy. As you can see, the text disappears from the preview.</p>