As you might be able to tell, I'm an HTML tabbed element library rather than a cute tabby cat :3
My owner author has not yet given me permission to roam on my own; I'm just a demo atm.
My owner's author's discord is ghrrlp
Of
course,
it
just
works
: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:
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.