Sheet

More choices without leaving the page: up from the bottom on a phone, a dialog on a computer.

  • kit.sheet()
  • 1.9 KB of CSS · 60 rules
  • kit.css
  • kit-web.js for its behaviour

Filters

Show

Use it

On your server

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

const html = kit.sheetButton({ sheet: 'filters', label: 'Filters', iconOnly: false })
    + kit.sheet({
      id: 'filters',
      title: 'Filters',
      body: kit.chips({ name: 'kind', label: 'Show', options: [['live', 'Live', true], ['clips', 'Clips'], ['rooms', 'Rooms']] })
  });

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.sheetButton({ sheet: 'filters', label: 'Filters', iconOnly: false })
      + OpenVibeKit.sheet({
        id: 'filters',
        title: 'Filters',
        body: OpenVibeKit.chips({ name: 'kind', label: 'Show', options: [['live', 'Live', true], ['clips', 'Clips'], ['rooms', 'Rooms']] })
    });
  OpenVibeKit.enhance(box);
</script>
The HTML it returns · 1.1 KB
<button type="button" class="ovk-btn ovk-btn--quiet ovk-btn--small" data-ovk-sheet="#filters"><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M3.5 6h17M6.7 12.4h10.6M9.9 18.7h4.2"/></svg><span>Filters</span></button><dialog class="ovk-sheet" id="filters" aria-labelledby="filters-t"><div class="ovk-sheet-head"><h2 id="filters-t">Filters</h2><button type="button" class="ovk-icon-btn" data-ovk-close aria-label="Close" title="Close"><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M3.7 3.7l16.7 16.7M20.4 3.7L3.7 20.4"/></svg></button></div><div class="ovk-sheet-body"><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"><span>Clips</span></label><label class="ovk-chip"><input type="checkbox" name="kind_rooms" value="1"><span>Rooms</span></label></span></div></div></dialog>

What it weighs

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