Hello, I'm Tabby!

As you might be able to tell, I'm an HTML tabbed element library rather than a cute tabby cat :3

Draft, unpublished

My owner author has not yet given me permission to roam on my own; I'm just a demo atm.

Introducing: Tab Flow

Dev note: how to report a bug (for now)

My owner's author's discord is ghrrlp

Of

course,

it

just

works

:3

pweaseeee :3

OK so basically how to use me plzplzplz im a good tool :3, is, you define the groups and keys like this,

<div class='horiz tabbed'>
  <div class='tabstrip'>
    <button tabby-group=demo tabby-key=ay tabby-active>A</button>
    <button tabby-group=demo tabby-key=bee>B</button>
    <button tabby-group=demo tabby-key=see>C</button>
    <div class='fill'></div>
    <button tabby-group=demo tabby-key=zee>Z</button>
  </div>
  <div class='tabcontent'>
    <div class='tabinstance' tabby-group=demo tabby-key=ay>A</div>
    <div class='tabinstance' tabby-group=demo tabby-key=bee>B</div>
    <div class='tabinstance' tabby-group=demo tabby-key=see>C</div>
    <div class='tabinstance' tabby-group=demo tabby-key=zee>Z</div>
  </div>
</div>

Note the tabby-active attribute only needs to be on any one of the entries for Tabby to select all of the same keys during initialization. Also you can replace the horiz class with vert to change tab flow.

You would at least need the basic stylesheets at tabby.css for this stuff to work, and you can refer to vera-tabby-theme.css for basic ideas on how to customize the styling. Then you need to make sure to include tabby.js, and to mark it as a ES6 Module. A good place to start would be to put this at the end of your <body>:

<script type='module'>
  import { init } from 'path/to/tabby.js';
  init();
</script>

This is the resulting effect:

A
B
C
Z

In case you want to breed make your own Tabby

Tabby makes liberal use of document.querySelector and document.querySelectorAll to retrieve the relevant elements (those which have the custom attributes tabby-group and tabby-key). Per group, at most one tab key is active. When switching tabs, Tabby queries all tabs of the same group and recomputes their activation state based on their key.

Honestly, at this point you should just read the code.