Tabs

Links, so they work without JavaScript. For settings and explainers, never to hide content.

  • kit.tabs()
  • 313 B of CSS · 7 rules
  • kit.css
  • No script needed

Use it

On your server

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

const html = kit.tabs({
      base: '/kit/tabs',
      items: [
          { key: 'look', label: 'Look' },
          { key: 'sound', label: 'Sound', count: 2 },
          { key: 'privacy', label: 'Privacy' },
      ],
      active: 'look'
  });

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>
  const box = document.querySelector('#here');
  box.innerHTML = OpenVibeKit.tabs({
        base: '/kit/tabs',
        items: [
            { key: 'look', label: 'Look' },
            { key: 'sound', label: 'Sound', count: 2 },
            { key: 'privacy', label: 'Privacy' },
        ],
        active: 'look'
    });
  OpenVibeKit.enhance(box);
</script>
The HTML it returns · 260 B
<nav class="ovk-tabs" aria-label="Sections"><a href="/kit/tabs?tab=look" aria-current="page"><span>Look</span></a><a href="/kit/tabs?tab=sound"><span>Sound</span><span class="ovk-tab-n">2</span></a><a href="/kit/tabs?tab=privacy"><span>Privacy</span></a></nav>

What it weighs

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

It is also drawn natively: Jetpack Compose and SwiftUI.