-
Notifications
You must be signed in to change notification settings - Fork 48
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #116 from flowforge/ui-template-docs
Add ui-template documentation
- Loading branch information
Showing
4 changed files
with
29 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
--- | ||
props: | ||
Group: Defines which group of the UI Dashboard this widget will render in. | ||
Template: Controls the width of the button with respect to the parent group. Maximum value is the width of the group. | ||
--- | ||
|
||
<script setup> | ||
</script> | ||
|
||
# Text `ui-template` | ||
|
||
Provide custom HTML (including any [Vuetify components](https://vuetifyjs.com/en/components/all/)) to render in the Dashboard. | ||
|
||
The template also has access to two built-in functions: | ||
|
||
- `send` - Outputs a message (defined by the input to this function call) from this node in the Node-RED flow. | ||
- `submit` - Send a `FormData` object when attached to a `<form>` element. The created object will consnist of the `name` attributes for each form element, corresponding to their respective `value` attributes. | ||
|
||
_Note: Currently restricted to custom HTML only, but there are plans to add `<style>` and `<script>` editors in the future too (track [here](https://github.com/flowforge/flowforge-nr-dashboard/issues/115))._ | ||
|
||
## Properties | ||
|
||
<PropsTable/> | ||
|
||
## Example | ||
|
||
![Examples of UI Template](../../assets/images/node-examples/ui-template.png "Examples of UI Template"){data-zoomable} | ||
*Examples of variants of ui-template, one with a functional form, and another showing use of random Vuetify components.* |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters