Skip to main content

panel

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://unpkg.com/@mulsense/xnew@0.7.x/dist/xnew.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>

<body class="m-0 p-0 w-full h-screen overflow-hidden">
  <div id="main" class="relative w-full h-full"></div>
  <script>
    xnew(document.querySelector('#main'), (unit) => {
      xnew.nest('<div class="p-2 flex gap-2 items-baseline justify-between">');
        
      const textunit = xnew('<div class="m-0.5 p-1 rounded bg-gray-200">', 'Console');
      textunit.on('+console', ({ text }) => textunit.element.textContent = text);
      
      xnew(MyPanel);
    });

    function MyPanel(unit) {
      xnew.nest('<div class="absolute top-2 right-2 w-48 text-sm">');
      xnew.nest('<div class="max-h-[calc(100vh-1rem)] overflow-y-auto p-1 border rounded-lg shadow-lg bg-gray-100 text-green-900">');
      const panel = xnew(xnew.basics.Panel);
      
      panel.group({ name: 'My Panel', open: true }, (group) => {
        group.group({ name: 'group 1', open: true }, (subgroup) => {
          subgroup.button('button1').on('click', () => xnew.emit('+console', { text: 'button1 clicked' }));
          subgroup.button('button2').on('click', () => xnew.emit('+console', { text: 'button2 clicked' }));
          subgroup.button('button3').on('click', () => xnew.emit('+console', { text: 'button3 clicked' }));
          subgroup.separator();
        });

        group.range('data', { value: 20, min: 0, max: 60, step: 2 }).on('input', ({ value }) => xnew.emit('+console', { text: `data changed to ${value}` }));
        group.checkbox('flag').on('input', ({ value }) => xnew.emit('+console', { text: `flag changed to ${value}` }));
        group.select('color', { items: ['red', 'green', 'blue'] }).on('input', ({ value }) => xnew.emit('+console', { text: `color changed to ${value}` }));
        group.separator();

        const show = group.checkbox('show');
        const subgroup = panel.group({ open: false }, (subgroup) => {
          xnew('<p class="m-1">', 'hellow');
        });
        show.on('input', ({ value }) => value ? subgroup.open() : subgroup.close());
      });
      
    }
  </script>
</body>

</html>