fix: SEO-1 (#29)

2026-01-12 07:12:53 +01:00 · 2023-09-22 12:35:24 +02:00
parent d392dd0407
commit f3b8bb4d3b
111 changed files with 222 additions and 203 deletions
--- a/nodes/ui-controls/button/README.md
+++ b/nodes/ui-controls/button/README.md
@@ -0,0 +1,108 @@
+---
+hide_title: true
+hide_table_of_contents: true
+title: Button
+---
+
+<##head##>
+
+# Button
+
+This node places a customizable button in the visual tree.
+
+<div className="ndl-image-with-background l">
+
+![](/nodes/ui-controls/button/button_visual.png)
+
+</div>
+
+The button has a <span className="ndl-signal">Click</span> signal that you can use to trigger actions.
+
+<div className="ndl-image-with-background l">
+
+![](/nodes/ui-controls/button//button_node.png)
+
+</div>
+<##head##>
+
+This control contains all logic such as accessibility etc. It can be styled in via it's properties.
+Use variations to create different types of buttons
+
+## Inputs
+
+The Button can be enabled and disabled using the Enabled input:
+
+@include "../../shared-props/inputs/_enabled.md"
+
+The Button node has a set of label properties that can be set:
+
+| Data                                           | Description                                                                                      |
+| ---------------------------------------------- | ------------------------------------------------------------------------------------------------ |
+| <span className="ndl-data">Enable Label</span> | Sets whether the label is visible or not.                                                        |
+| <span className="ndl-data">Text Style</span>   | Set an existing text style to this node, or create a new text style from the current properties. |
+| <span className="ndl-data">Label</span>        | A text string that will be shown as the label on the button.                                     |
+
+Similarly, it has a set of icon properties:
+
+| Data                                          | Description                                                                                         |
+| --------------------------------------------- | --------------------------------------------------------------------------------------------------- |
+| <span className="ndl-data">Enable Icon</span> | Sets whether the icon is visible or not.                                                            |
+| <span className="ndl-data">Type</span>        | Use this to set if you want to use a predefined `icon` or a custom `image` from the project folder. |
+| <span className="ndl-data">Source</span>      | Where to get the icon.                                                                              |
+| <span className="ndl-data">Spacing</span>     | The spacing between the text and the icon.                                                          |
+| <span className="ndl-data">Placement</span>   | Sets whether the icon should be to the `left` or to the `right` of the _Label_                      |
+| <span className="ndl-data">Size</span>        | The width of the icon in `px`.                                                                      |
+| <span className="ndl-data">Color</span>       | Sets the color of the icon. Only visible if _Type_ is set to `icon`.                                |
+
+### Visual
+
+This node supports the following [Visual Input Properties](/nodes/shared-props/inputs/visual-input-properties):
+
+-   [Margin](/nodes/shared-props/inputs/visual-input-properties#margin)
+-   [Padding](/nodes/shared-props/inputs/visual-input-properties#padding)
+-   [Alignment](/nodes/shared-props/inputs/visual-input-properties#alignment)
+-   [Dimensions](/nodes/shared-props/inputs/visual-input-properties#dimensions)
+-   [Layout, Position](/nodes/shared-props/inputs/visual-input-properties#position)
+-   [Text Styles](/nodes/shared-props/inputs/visual-input-properties#text-styles)
+-   [Style](/nodes/shared-props/inputs/visual-input-properties#style)
+-   [Border Style](/nodes/shared-props/inputs/visual-input-properties#border-style)
+-   [Corner Radius](/nodes/shared-props/inputs/visual-input-properties#corner-radius)
+-   [Box Shadow](/nodes/shared-props/inputs/visual-input-properties#box-shadow)
+-   [Placement](/nodes/shared-props/inputs/visual-input-properties#placement)
+-   [Dimension Constraints](/nodes/shared-props/inputs/visual-input-properties#dimension-constraints)
+-   [Other](/nodes/shared-props/inputs/visual-input-properties#other)
+-   [Advanced HTML](/nodes/shared-props/inputs/visual-input-properties#advanced-html)
+
+## Outputs
+
+The main output for the button is the Click <span className="ndl-signal">signal</span>:
+
+| Signal                                    | Description                                                                                 |
+| ----------------------------------------- | ------------------------------------------------------------------------------------------- |
+| <span className="ndl-signal">Click</span> | <##output:onClick##>A signal is sent on this output when the button is clicked.<##output##> |
+
+It also features a set of more in depth <span className="ndl-signal">signals</span>:
+
+@include "../../shared-props/outputs/_control-events.md"
+
+### States
+
+Apart from triggering <span className="ndl-signal">signals</span> the Button node also notifies of its state through <span className="ndl-data">data</span> outputs:
+
+@include "../../shared-props/outputs/_control-states.md"
+
+### Visual
+
+This node supports the following [Visual Output Properties](/nodes/shared-props/outputs/visual-output-properties/):
+
+-   [Bounding Box](/nodes/shared-props/outputs/visual-output-properties/#bounding-box)
+-   [Mounted](/nodes/shared-props/outputs/visual-output-properties/#mounted)
+-   [Other](/nodes/shared-props/outputs/visual-output-properties/#other)
+
+<div className="hidden-props-for-editor">
+
+@include "../../shared-props/inputs/_visual-input-properties.md"
+
+@include "../../shared-props/outputs/_visual-output-properties.md"
+
+</div>