Merge pull request FlowFuse#1148 from FlowFuse/1107-docs-interactive-…

…dashboard

Interactive Dashboard Docs

docs/nodes/widgets/ui-button-group.md

@@ -31,10 +31,15 @@ dynamic:
 
 <script setup>
     import AddedIn from '../../components/AddedIn.vue';
+    import TryDemo from "./../../components/TryDemo.vue"
 </script>
 
+<TryDemo href="button-group">
+
 # Button `ui-button-group` <AddedIn version="1.3.0" />
 
+</TryDemo>
+
 Adds a set of buttons that act as a multi-state switch to your dashboard. When an individual button is clicked, it will become active and all other buttons in the group will become inactive, with the newly selected value being emitted from the node in Node-RED.
 
 The selected option can be set by sending a `msg.payload` with the value of the button to be selected.

docs/nodes/widgets/ui-button.md

@@ -51,10 +51,16 @@ dynamic:
 ---
 
 <script setup>
+    import TryDemo from "./../../components/TryDemo.vue"
 </script>
 
+
+<TryDemo href="button-example">
+
 # Button `ui-button`
 
+</TryDemo>
+
 Adds a clickable button to your dashboard.
 
 ## Properties

docs/nodes/widgets/ui-dropdown.md

@@ -36,10 +36,15 @@ dynamic:
 ---
 
 <script setup>
+    import TryDemo from "./../../components/TryDemo.vue";
 </script>
 
+<TryDemo href="dropdown">
+
 # Dropdown `ui-dropdown`
 
+</TryDemo>
+
 Adds a dropdown to your dashboard that will emit values in Node-RED under `msg.payload` anytime it's value is changed.
 
 ## Programmatic Selections

docs/nodes/widgets/ui-file-input.md

@@ -15,10 +15,15 @@ props:
 
 <script setup>
     import AddedIn from '../../components/AddedIn.vue';
+    import TryDemo from "./../../components/TryDemo.vue";
 </script>
 
+<TryDemo href="file-input">
+
 # File Upload <AddedIn version="1.12.0" />
 
+</TryDemo>
+
 The File Upload widget allows users to upload files to Node-RED. The widget can be configured to accept specific file types and allow for multiple files.
 
 ## Properties

docs/nodes/widgets/ui-form.md

@@ -32,10 +32,15 @@ dynamic:
 ---
 
 <script setup>
+    import TryDemo from "./../../components/TryDemo.vue";
 </script>
 
+<TryDemo href="form">
+
 # Form `ui-form`
 
+</TryDemo>
+
 Adds a form to user interface which helps to collect multiple value from the user on submit button click as an object in `msg.payload`.
 
 ## Properties

docs/nodes/widgets/ui-gauge.md

@@ -21,10 +21,15 @@ props:
 
 <script setup>
     import AddedIn from '../../components/AddedIn.vue';
+    import TryDemo from "./../../components/TryDemo.vue";
 </script>
 
+<TryDemo href="gauge">
+
 # Gauge `ui-gauge` <AddedIn version="1.1.0"/>
 
+</TryDemo>
+
 Adds a Gauge Chart to your Dashboard. This can be configured with custom types (half, 3/4), styles (rounded, needle) and segmentation with examples detailed [below](#examples).
 
 ![Screenshot showing each gauge type side-by-side](/images/node-examples/ui-gauge-types.png "Screenshot showing each gauge type side-by-side"){data-zoomable}

docs/nodes/widgets/ui-markdown.md

@@ -10,11 +10,17 @@ dynamic:
 ---
 
 <script setup>
-    import AddedIn from '../../components/AddedIn.vue'
+    import AddedIn from '../../components/AddedIn.vue';
+    import TryDemo from "./../../components/TryDemo.vue";
 </script>
 
+
+<TryDemo href="markdown-viewer">
+
 # Markdown Viewer `ui-markdown`
 
+</TryDemo>
+
 Allows for markdown to be defined within Node-RED editor and rendered into the UI. Can be used for rendering labels, headers or even full blog articles.
 
 You can inject `msg` values into the markdown using:

docs/nodes/widgets/ui-notification.md

@@ -12,11 +12,14 @@ props:
 ---
 
 <script setup>
-    import AddedIn from '../../components/AddedIn.vue'
+    import AddedIn from '../../components/AddedIn.vue';
+    import TryDemo from "./../../components/TryDemo.vue";
 </script>
 
 # Notification `ui-notification` <AddedIn version="0.5.0" />
 
+<TryDemo href="notification" />
+
 Known in Dashboard 1.0 as a "Toast", this widget displays text/HTML in a small window that will appear on the screen for a defined duration of time (`timeout`) and at a defined location on the screen (`position`).
 
 If you want to have the notification show indefinitely, you can set `timeout` to `0`. It will not be possible to close the notification manually unless you also set `allowDismiss` to `true`.

docs/nodes/widgets/ui-radio-group.md

@@ -16,10 +16,16 @@ dynamic:
 ---
 
 <script setup>
+    import TryDemo from "./../../components/TryDemo.vue";
 </script>
 
+
+<TryDemo href="radio-group">
+
 # Radio Group `ui-radio-group`
 
+</TryDemo>
+
 Adds a Radio Group to your dashboard that will emit values in Node-RED under `msg.payload` anytime a value is selected.
 
 ## Programmatic Selections

docs/nodes/widgets/ui-slider.md

@@ -62,10 +62,15 @@ dynamic:
 ---
 
 <script setup>
+    import TryDemo from "./../../components/TryDemo.vue";
 </script>
 
+<TryDemo href="slider">
+
 # Slider `ui-slider`
 
+</TryDemo>
+
 Adds a slider to your dashboard that will emit values in Node-RED under `msg.payload` anytime it's value is changed.
 
 ## Properties

docs/nodes/widgets/ui-switch.md

@@ -21,10 +21,16 @@ dynamic:
 ---
 
 <script setup>
+    import TryDemo from "./../../components/TryDemo.vue";
 </script>
 
+
+<TryDemo href="switch">
+
 # Toggle Switch `ui-switch`
 
+</TryDemo>
+
 Adds a toggle switch to the user interface.
 
 ## Properties

docs/nodes/widgets/ui-table.md

@@ -22,15 +22,20 @@ dynamic:
 
     import FlowViewer from '../../components/FlowViewer.vue'
     import AddedIn from '../../components/AddedIn.vue'
+    import TryDemo from "./../../components/TryDemo.vue";
 
     const examples = ref({
       'cellTypes': ExampleCellTypes
     })
 </script>
 
 
+<TryDemo href="table">
+
 # Data Table `ui-table` <AddedIn version="0.4.0" />
 
+</TryDemo>
+
 Renders a set of data in a tabular format. Expects an input (`msg.payload`) in the format of:
 
 ```json

docs/nodes/widgets/ui-template.md

@@ -9,9 +9,15 @@ props:
 
 <script setup>
     import AddedIn from '../../components/AddedIn.vue';
+    import TryDemo from "./../../components/TryDemo.vue";
 </script>
 
+
+<TryDemo href="template">
+
 # Template `ui-template` <AddedIn version="0.10.0"/>
+
+</TryDemo>
 
 Provide custom JS and HTML (including any [Vuetify components](https://vuetifyjs.com/en/components/all/)) to render in the Dashboard.
 

docs/nodes/widgets/ui-text-input.md

@@ -27,10 +27,16 @@ dynamic:
 ---
 
 <script setup>
+    import TryDemo from "./../../components/TryDemo.vue"
 </script>
 
+
+<TryDemo href="text-input">
+
 # Text Input `ui-text-input`
 
+</TryDemo>
+
 Adds a single text input row to your dashboard, with a configurable "type" (text, password, etc).
 
 ## Properties

docs/nodes/widgets/ui-text.md

@@ -20,6 +20,7 @@ dynamic:
     import FlowViewer from '../../components/FlowViewer.vue'
     import ExampleSuffix from '../../examples/ui-text-suffix.json'
     import ExampleHTMLInjection from '../../examples/ui-text-html-injection.json'
+    import TryDemo from "./../../components/TryDemo.vue"
 
     const examples = ref({
       'suffix': ExampleSuffix,
@@ -28,7 +29,11 @@ dynamic:
 </script>
 
 
+<TryDemo href="text">
+
 # Text `ui-text`
+
+</TryDemo>
 
 Displays a non-editable text field on the user interface. Each received `msg.payload` will update the value shown alongside the (optional) label.