Minor examples improvements

playcanvas · Dec 27, 2024 · 267101c · 267101c
1 parent f4a1429
commit 267101c
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 11 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';
 
         document.body.appendChild(labelGroup.dom);
+
+        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(infoBox.dom);
     </script>
 </body>
 </html>
diff --git a/examples/index.html b/examples/index.html
@@ -29,8 +29,9 @@
     <script type="importmap">
         {
             "imports": {
-                "@playcanvas/pcui": "https://cdn.jsdelivr.net/npm/@playcanvas/pcui/+esm",
-                "@playcanvas/pcui/styles": "https://cdn.jsdelivr.net/npm/@playcanvas/pcui/styles/+esm"
+                "@playcanvas/observer": "https://cdn.jsdelivr.net/npm/@playcanvas/observer/+esm",
+                "@playcanvas/pcui": "/dist/module/src/index.mjs",
+                "@playcanvas/pcui/styles": "/styles/dist/index.mjs"
             }
         }
     </script>
@@ -60,7 +61,7 @@
         const treeView = new TreeView({
             allowRenaming: false,
             allowReordering: false,
-            allowDragging: false
+            allowDrag: false
         });
 
         const iframe = document.createElement('iframe');