Chips

Filters you can turn on and off, or one of a few.

  • kit.chips()
  • 432 B of CSS · 11 rules
  • kit.css
  • No script needed
Show

Use it

On your server

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

const html = kit.chips({
      name: 'kind',
      label: 'Show',
      options: [['live', 'Live', true], ['clips', 'Clips', true], ['rooms', 'Rooms'], ['games', 'Games']]
  });

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.chips({
        name: 'kind',
        label: 'Show',
        options: [['live', 'Live', true], ['clips', 'Clips', true], ['rooms', 'Rooms'], ['games', 'Games']]
    });
  OpenVibeKit.enhance(box);
</script>
The HTML it returns · 532 B
<div class="ovk-set-row ovk-set-chips"><span class="ovk-set-text">Show</span><span class="ovk-chips"><label class="ovk-chip"><input type="checkbox" name="kind_live" value="1" checked><span>Live</span></label><label class="ovk-chip"><input type="checkbox" name="kind_clips" value="1" checked><span>Clips</span></label><label class="ovk-chip"><input type="checkbox" name="kind_rooms" value="1"><span>Rooms</span></label><label class="ovk-chip"><input type="checkbox" name="kind_games" value="1"><span>Games</span></label></span></div>

What it weighs

Its own rules are 1.3 KB, 432 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.