More menu

The rest of a row's actions, behind one button. Dangerous ones confirm.

  • kit.more()
  • 1.2 KB of CSS · 34 rules
  • kit.css
  • kit-web.js for its behaviour

Use it

On your server

const kit = require('openvibe-shared/kit');

const html = kit.more({
      label: 'More',
      items: [
          { href: '/r/night-owls/edit', label: 'Edit the room', icon: 'pencil' },
          { href: '/r/night-owls/invite', label: 'Invite', icon: 'invite' },
          { action: '/r/night-owls/delete', label: 'Delete the room', icon: 'trash', danger: true, confirm: 'Delete Night owls for everyone?' },
      ]
  });

In a page that draws itself

<link rel="stylesheet" href="https://openvibe.network/shared/kit.css">
<script src="https://openvibe.network/shared/kit.js"></script>
<script src="https://openvibe.network/shared/kit-web.js" defer></script>

<script>
  const box = document.querySelector('#here');
  box.innerHTML = OpenVibeKit.more({
        label: 'More',
        items: [
            { href: '/r/night-owls/edit', label: 'Edit the room', icon: 'pencil' },
            { href: '/r/night-owls/invite', label: 'Invite', icon: 'invite' },
            { action: '/r/night-owls/delete', label: 'Delete the room', icon: 'trash', danger: true, confirm: 'Delete Night owls for everyone?' },
        ]
    });
  OpenVibeKit.enhance(box);
</script>
The HTML it returns · 1.3 KB
<details class="ovk-more"><summary class="ovk-icon-btn" aria-label="More" title="More"><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="5.2" cy="12" r="1.6"/><circle cx="12" cy="12" r="1.6"/><circle cx="18.8" cy="12" r="1.6"/></svg></summary><div class="ovk-pop" role="menu"><a class="ovk-pop-item" role="menuitem" href="/r/night-owls/edit"><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M11.9 19.6h8.4M16.1 4.2a2 2 0 0 1 2.8 2.8L7.2 18.7l-3.7 0.9l0.9-3.7Z"/></svg><span>Edit the room</span></a><a class="ovk-pop-item" role="menuitem" href="/r/night-owls/invite"><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="9.2" cy="8.2" r="2.9"/><path d="M3.8 18.8c0-3 2.4-4.8 5.3-4.8s5.3 2 5.3 4.8M17.9 8.2v5.3M15.3 10.9h5.3"/></svg><span>Invite</span></a><form method="post" action="/r/night-owls/delete" data-ovk-confirm="Delete Night owls for everyone?"><button type="submit" class="ovk-pop-item ovk-pop-item--danger" role="menuitem"><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M4.1 6.7h15.8M10 10.6v5.9M14 10.6v5.9M6.1 6.7l1 11.8a2 2 0 0 0 2 2h5.9a2 2 0 0 0 2-2l1-11.8M9 6.7V3.7h5.9v3"/></svg><span>Delete the room</span></button></form></div></details>

What it weighs

Its own rules are 5.3 KB, 1.2 KB as sent: 7% of the kit's CSS. A page that draws it pays for the whole stylesheet once, and every other part comes free.