mirror of
https://github.com/noodlapp/noodl-docs.git
synced 2026-01-11 23:02:54 +01:00
53f0d6320e
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>
109 lines
5.5 KiB
Markdown
109 lines
5.5 KiB
Markdown
---
|
|
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">
|
|
|
|
|
|
|
|
</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">
|
|
|
|
|
|
|
|
</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>
|