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.2.x/dist/xnew.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>

<body class="relative m-0 p-0 w-full h-screen overflow-hidden">
  <div id="main" class="relative w-full h-full"></div>
  <script>
    xnew('#main', (unit) => {
      xnew.nest('<div class="p-2">');
      xnew(MyPanel);
    });

    function MyPanel(unit) {
      xnew.nest('<div class="w-64 p-1 border rounded-lg shadow-lg bg-white">');

      xnew('<div">', 'My Panel');

      xnew((unit) => {
        xnew.extend(PanelGroup, { name: 'group 1', open: false });
        xnew('<button class="m-0.5 border rounded-lg hover:bg-gray-200 cursor-pointer">', 'button 1');
        xnew('<button class="m-0.5 border rounded-lg hover:bg-gray-200 cursor-pointer">', 'button 2');
        xnew('<button class="m-0.5 border rounded-lg hover:bg-gray-200 cursor-pointer">', 'button 3');
      });

      xnew((unit) => {
        xnew.extend(PanelGroup, { name: 'group 2', open: true });

        xnew((unit) => {
          let status;
          xnew('<div class="text-sm flex justify-between">', (unit) => {
              xnew('<div class="flex-1">', 'range 1');
              status = xnew('<div class="flex-none">', '25');
          });
          const input = xnew('<input type="range" name="range 1" min="0" max="100" value="25" class="m-0 w-full">');
          input.on('input', (event) => {
            status.element.textContent = event.target.value;
          });
        });

        xnew((unit) => {
          xnew('<div class="flex justify-between">', (unit) => {
              xnew('<div class="flex-1">', 'radio 1');
          });
          xnew('<label class="block">', () => {
            xnew('<input type="radio" name="radio 1" value="radio A" checked>');
            xnew('<span class="mx-2">', 'radio A');
          });
          xnew('<label class="block">', () => {
            xnew('<input type="radio" name="radio 1" value="radio B">');
            xnew('<span class="mx-2">', 'radio B');
          });
            xnew('<label class="block">', () => {
            xnew('<input type="radio" name="radio 1" value="radio C">');
            xnew('<span class="mx-2">', 'radio C');
          });
        })

        xnew((unit) => {
          xnew('<div class="flex justify-between">', (unit) => {
              xnew('<div class="flex-1">', 'text 1');
          });
          xnew('<input type="text" name="text 1" value="text" class="px-2 w-full h-8 border rounded-lg">');
        })
      });
    }

    function PanelGroup(group, { name, open = false }) {
      xnew.extend(xnew.basics.AccordionFrame, { open });
      xnew((header) => {
          xnew.nest('<div style="margin: 0.2em 0;">');
          xnew.extend(xnew.basics.AccordionHeader);
          xnew(xnew.basics.AccordionBullet);
          xnew('<div>', name);
      });
      xnew.extend(xnew.basics.AccordionContent);
    }

  </script>
</body>

</html>