Minor examples improvements (#387)

* Minor examples improvements * Revert import map * Revert import map * Tweak numericinput example
playcanvas · Dec 27, 2024 · ba8f909 · ba8f909
1 parent f4a1429
commit ba8f909
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 9 deletions.
diff --git a/examples/elements/numericinput.html b/examples/elements/numericinput.html
@@ -23,22 +23,24 @@
 </head>
 <body>
     <script type="module">
-        import { LabelGroup, NumericInput } from '@playcanvas/pcui';
+        import { InfoBox, LabelGroup, NumericInput } from '@playcanvas/pcui';
         import '@playcanvas/pcui/styles'
 
-        const numericInput = new NumericInput({
-            step: 0.1,
-            min: 0,
-            max: 1,
-            value: 0.5
-        });
+        const numericInput = new NumericInput();
 
         const labelGroup = new LabelGroup({
             field: numericInput,
-            text: 'NumericInput'
+            text: 'Enter a number:'
+        });
+        labelGroup.dom.querySelector('.pcui-label').style.width = '125px';
+
+        const infoBox = new InfoBox({
+            icon: 'E400',
+            text: 'NumericInput supports expressions and percentages. For example, you can enter "10 * (2 + 3)" to get a value of 50. You can also enter "50%" to calculate the percentage of the current value. You can even use percentages in expressions.'
         });
 
         document.body.appendChild(labelGroup.dom);
+        document.body.appendChild(infoBox.dom);
     </script>
 </body>
 </html>
diff --git a/examples/index.html b/examples/index.html
@@ -60,7 +60,7 @@
         const treeView = new TreeView({
             allowRenaming: false,
             allowReordering: false,
-            allowDragging: false
+            allowDrag: false
         });
 
         const iframe = document.createElement('iframe');