diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js index 72cd7997..f59fd42b 100644 --- a/docs/.vitepress/config.js +++ b/docs/.vitepress/config.js @@ -47,6 +47,7 @@ export default { { text: 'ui-dropdown', link: '/nodes/widgets/ui-dropdown' }, { text: 'ui-slider', link: '/nodes/widgets/ui-slider' }, { text: 'ui-switch', link: '/nodes/widgets/ui-switch' }, + { text: 'ui-template', link: '/nodes/widgets/ui-template' }, { text: 'ui-text', link: '/nodes/widgets/ui-text' }, { text: 'ui-text-input', link: '/nodes/widgets/ui-text-input' }, { text: 'ui-markdown', link: '/nodes/widgets/ui-markdown' }, diff --git a/docs/assets/images/node-examples/ui-template.png b/docs/assets/images/node-examples/ui-template.png new file mode 100644 index 00000000..0121325b Binary files /dev/null and b/docs/assets/images/node-examples/ui-template.png differ diff --git a/docs/nodes/widgets/ui-template.md b/docs/nodes/widgets/ui-template.md new file mode 100644 index 00000000..bdbb6818 --- /dev/null +++ b/docs/nodes/widgets/ui-template.md @@ -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. +--- + + + +# 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 `
` 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 `