I whipped up a minimal script for tabs and for dropdowns, both on top of jQuery. I'd like to remove this dependency, however, as it can add a lot of weight to projects that aren't using jQuery.
In previous versions of Shoelace, the docs stated:
Tabs are not interactive by default! Shoelace is a CSS starter kit, not a framework. For convenience, a lightweight sample script is provided to demonstrate how to make tabs interactive.
However, it's apparent that pretty much everyone will just copy and paste the sample script and use it. If that's the case, we might as well provide an official version of tabs/dropdowns in the dist so users can load it via CDN.
Objective
My goal for shoelace.js
is to provide vanilla JS scripts for tabs and dropdowns that just work, much like the current jQuery-based versions. These should be simple scripts that don't require initialization and don't have any API. Also like the current versions, they need to use event bubbling to ensure dynamically created tabs/dropdowns also work.
Now, before people lose their minds about not having an API and not requiring initialization, I feel this is important to say:
Shoelace components should act like native components as much as possible. This is part of Shoelace's core philosophy.
In the same way you expect a <select>
control to open without JavaScript, tabs and dropdowns should activate "without JavaScript."
In the same way you can disable an <input>
by adding the disabled
property, you can disable tabs and dropdowns by adding the disabled
property.
In other words, we're using JavaScript as a shim to make these controls work, not as an extensive plugin that packs in a million features.
Of course, shoelace.js
will be completely optional. Users who want a more robust solution are welcome to adopt alternatives such as Tabby.
So that's where I'm trying to go with things. We're basically cloning tabs.js
and dropdowns.js
in a non-jQuery way. Browser support should include IE11 even though it doesn't support CSS vars, as many users use Shoelace + a polyfill for older browsers.
If you're interested in taking a stab at it, comment here and let me know.
Additional planning: