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/xnew@5.0.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', (self) => {
      xnew.extend(xnew.TabFrame);
      xnew.nest('<div class="p-2">');
      xnew(MyPanel);
    });

    function MyPanel(self) {
      xnew.extend(xnew.PanelFrame);
      xnew.nest('<div class="text-sm w-64 p-1 border rounded-lg">')

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

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

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

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

        xnew((frame) => {
          xnew.extend(xnew.InputFrame);

          xnew('<div class="flex justify-between">', (self) => {
              xnew('<div class="flex-1">', 'radio 1');
              const status = xnew('<div class="flex-none">', 'radio A');
              frame.on('-input', ({ event }) => {
                status.element.textContent = event.target.value;
              })
          });
          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((self) => {
          xnew.extend(xnew.InputFrame);

          xnew('<div class="flex justify-between">', (self) => {
              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">');
        })
      });
    }
  </script>
</body>

</html>