Missing.js
Missing.js is a JavaScript library implementing common UI patterns.
§ Tabs
See ARIA § Tabs
Add tabs.js
as a module script to your page
and mark up your tabs with the appropriate ARIA roles.
Behavior will be added automatically.
<script type="module" src="https://the.missing.style/v1.0.9/missing-js/tabs.js">
§ Initializing dynamic content
For dynamically inserted content: initialize it as such:
import tabs from "https://the.missing.style/v1.0.9/missing-js/tabs.js";
// ... insert some content ...
tabs(theContentIJustInserted);
Any elements that are inside a shadow DOM will also need to be initialized explicitly this way.
All of our components will find elements that need initialization within the subtree you pass in ---
you could pass the whole document
every time if you wanted to.
§ Menu
See ARIA § menu
<script type="module" src="https://the.missing.style/v1.0.9/missing-js/menu.js">
import { menu, menuButton } from "https://the.missing.style/v1.0.9/missing-js/menu.js";
All notes above about initializing dynamic content apply here.
§ Expand/collapse navbar
<script type="module" src="https://the.missing.style/v1.0.9/missing-js/overflow-nav.js">
Make sure to add:
- the
data-overflow-nav
attribute to your navbar. - inside that navbar, a button with a
data-nav-expander
attribute.
<header class="navbar" data-overflow-nav>
<button class="iconbutton" data-nav-expander aria-hidden>
☰ <!-- trigram for heaven -->
</button>
<!-- rest of navbar... -->
</header>
The navbar will remain horizontally scrollable.
All notes above about initializing dynamic content apply here (for all those times you dynamically add navbars to your page).